axios跨域请求

Question

                ...
                axios.post(car_info_url.model, {
                    data:{
                        make_id:'7'
                    },
                })
                ...

    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
        $allow_origin = config('api.allow_origins')?config('api.allow_origins'):[
            ...
        ];
        $allow_origins = implode(',',$allow_origin);
        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $allow_origins);
            $response->header('Access-Control-Allow-Headers', config('api.allow_headers'));
            $response->header('Access-Control-Expose-Headers', config('api.expose_headers'));
            $response->header('Access-Control-Allow-Methods', config('api.allow_methods'));
            $response->header('Access-Control-Allow-Credentials', (string) config('api.allow_credentials'));
        }
        return $response;
    }

初始化时的请求成功

vue事件触发的请求失败

Answer 1

https://learnku.com/laravel/t...

简单请求就三种数据类型：

• application/x-www-form-urlencoded（曾经最常见的 POST 类型）
• multipart/form-data
• text/plain

你那要按上文解决不了，就设置 Content-Type 为 text/plain 试试

Answer 2

字太小了看不清，不过提示好像是说，cors预检请求的响应中没有Access-Control-Allow-Origin的头，这个需要后端把这个头加上去，如果没有身份验证内容是*就可以。

后端对预检Option请求没有加上这些头，需要修改后端解决。和前端无关。

Answer 3

首先看下是否请求的是一个接口 不是的话换成一个接口做排除
下面那个错误应该是因为跨域请求超时 重点应该还是在前端这吧
不行就反向代理去请求

Answer 4

总结下:

• 1.跨域在非常见数据类型时会发options预请求;
• 2.换为application/x-www-form-urlencoded后不再发送;
• 3.服务端(laravel)使用$request->json('key') ok