Axios请求:被CORS政策阻止 [英] Axios Request: Blocked by CORS Policy

问题描述

在laravel 5.8，/ "vue": "^2.5.17" / "axios": "^0.18"中，我需要读取从邮递员ok读取的外部数据: https://imgur.com/a/SRBmK0P

In laravel 5.8, / "vue": "^2.5.17" / "axios": "^0.18", I need to read external data which are read from postman ok : https://imgur.com/a/SRBmK0P

我尝试使用axios读取这些数据并出现错误: https://imgur.com/a/o97xLm7

I try to read these data using axios and got error: https://imgur.com/a/o97xLm7

在浏览器中，我看到了请求的详细信息: https://imgur.com/a/EUkyV43

In the browse, I see details of the request : https://imgur.com/a/EUkyV43

我的JS代码:

            axios.post(window.REMOTE_SEARCH_WEB, {
                "query": "pc gamers",
                "blogger": false,
                "company": false,
                "influencer": false,
                "article": false,
                "pageId": 1,
                "sort": null,
                "sortOrder": null,
                "searchType": 1,
                "Access-Control-Allow-Origin": this.app_url,
                "Access-Control-Allow-Methods": "POST",
                "Access-Control-Max-Age": 86400,
                "Access-Control-Allow-Headers": "Content-Type, Authorization",
                'Access-Control-Allow-Credentials': 'true'
            }).then((response) => {

其中this.app_url是应用运行所在站点的首页url.

where this.app_url is home url of the site the app run at.

谷歌搜索，我发现必须填写几个参数Access-Control-*，就像上面的代码一样，但这并没有帮助我.

Googling I found several parametersAccess-Control-* must be filled, like in code above, but that did not help me.

你能说我要怎么解决吗?

Can you say how I to fix it?

是否可以根据我的axios的js代码在我的控件中运行操作，然后从那里使用PHP/Laravel发出请求的决定?如果是，请提供此类决定的示例...

Can it be that a decision could be from my js code with axios to run action in my control and from there to make request using PHP/Laravel? If yes, please provide example of such decision...

已修改的块: 我安装了 https://github.com/barryvdh/laravel-cors 软件包和

1)在文件中，我在app/Http/Kernel.php中添加了行

1) in file I added line in app/Http/Kernel.php

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

我在中间件组I中添加了该组，它不是"/api"内部的，而是外部请求. 正确吗?

I added in middleware group I that is is not ‘/api’ internal, but external request. Is it correct?

2)我没有更改就离开了文件config/cors.php:

2) I left file config/cors.php without changes :

return [

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

];

3)在axios.post请求中，我删除了所有访问控制参数

3) In axios.post request I removed all Access-Control parameters

axios.post(window.REMOTE_SEARCH_WEB, {
    "query": "pc gamers",
    "blogger": false,
    "company": false,
    "influencer": false,
    "article": false,
    "pageId": 1,
    "sort": null,
    "sortOrder": null,
    "searchType": 1,
}).then((response) => {

4)但请求中存在相同错误: https://imgur.com/a/wbgmrps

4) But the same error in request : https://imgur.com/a/wbgmrps

怎么了?

谢谢！

推荐答案

您可以通过在后端创建拦截器中间件来解决该问题，该中间件会将Access-control-allow标头附加到请求.

You can solve it with creating an interceptor middleware in your backend, that will attach the Access-control-allow headers to the request.

创建中间件cors

public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*') //REPLACE STAR WITH YOUR URL
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
          ->header('Access-Control-Allow-Headers', 'content-type, authorization, x-requested-with');
    }

然后在app/http/kernel.php的全局中间件列表中列出中间件

Then list the middleware in global middleware list in app/http/kernel.php

 protected $middleware = [
             ...
             \App\Http\Middleware\Cors::class
]

这篇关于Axios请求:被CORS政策阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！