时间戳

首页 > 解决方案 > Axios 请求：被 CORS 策略阻止

java - Axios 请求：被 CORS 策略阻止

问题描述

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

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

在浏览中，我看到了请求的详细信息： 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

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

你能说我怎么解决吗？

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

修改块： 我安装了https://github.com/barryvdh/laravel-cors包和

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

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

我在中间件组中添加了不是“/api”内部的，而是外部请求。这是正确的吗？

2）我没有更改文件 config/cors.php ： 

return [

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

];

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

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

怎么了 ？

谢谢！

标签： javalaravel-5access-control

解决方案

您可以通过在后端创建一个拦截器中间件来解决它，它将Access-control-allow标头附加到请求中。

创建中间件 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 中的全局中间件列表中列出中间件

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

推荐阅读