axios跨域

　参考：http://www.ruanyifeng.com/blog/2016/04/cors.html

• 遇到前后分离情况
  • 前端 a.com
  • 后端 server.a.com

　　　　　　　

• 环境
  • vue全家桶前端 php后端lumen5.5

　　　　　　　　　　　　　　　　　　

• 解决
  • 首先请求代码

  • return new Promise((resolve, reject) => {
        http.post(api.ADMIN_USER_LOGIN, userinfo).then(
            response => {
                //200
                if(response.data.status === configs.status.SUCCESS) {
                    commit(types.SET_USER, response.data.userinfo)
                    resolve(response)
                }else {
                    reject(response)
                }
                
            },
            (err) => {reject(err.response)}
        )
    });

    请求后浏览器报错

    Failed to load http://server.a.com/xxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.com' is therefore not allowed access. The response had HTTP status code 500.

• • 百度后发现此类请求已经归为非简单请求，了解原理后后端作出相应修改

    $router->options('/{origin:.*}', function(){
        $self_web = 'http://a.com';
    
        if(isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] === $self_web) {
            header('Access-Control-Allow-Origin: '.$self_web);
    
            $method = strtoupper($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']);
            if(in_array($method, ['PUT', 'POST', 'GET'], true)) {
                header('Access-Control-Request-Method: '.$method);
            }
    
            $content_types = explode(',', $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
            if($content_types) {
                $content_types = array_map(function($type){
                    return ucwords($type, '-');
                }, $content_types);
    
                if(count(array_diff($content_types, ['X-Requested-With', 'Content-Type'])) === 0) {
                    header("Access-Control-Allow-Headers: ".implode(',', $content_types));
                }
            }
        }
    });

• end