Axios请求:被CORS政策阻止

mstdmstd:

在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,
];

我在中间件组I中添加了它,它不是内部的“ / 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

怎么了 ?

谢谢!

阿迪亚·塔库(Aditya Thakur):

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

创建中间件核心

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
]

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CORS政策已阻止从源“空”访问脚本“

春季-Sock.js-WebSockets:被CORS政策阻止

已被CORS政策阻止:对预检请求的响应未通过访问控制检查

春季应用中的CORS政策阻止了来自角度应用的请求

Google OAuth2:重定向已被CORS政策阻止:请求需要进行预检,不允许遵循跨域重定向

CORS政策会阻止非浏览器请求访问资源吗?

404响应上的Laravel,Barryvdh / laravel-cors和axios跨源请求阻止错误

Vue Axios CORS政策:否'Access-Control-Allow-Origin'

所有请求都被CORS开发政策阻止

Google App Script Web App GET和POST请求被CORS政策阻止

Blazor请求被CORS政策阻止

Vue。js CORS问题,后端数据被CORS政策阻止

javascript:由于通配符而被CORS政策阻止

尝试使用axios访问Wikipedia Api,但收到CORS政策错误

由于cors问题而无法使Signal R工作-被cors政策阻止

空白cors政策阻止我在expressjs中的请求

仍然收到错误消息,已被CORS政策阻止

文件上传已被CORS政策阻止

POST请求由于CORS错误而在react axios中被阻止

向被 CORS 政策阻止的 API 发布请求

当我尝试使用 Axios 调用 Instagram API 时,我被“CORS 政策阻止”

为什么我会收到 Cors 错误:...已被 CORS 政策阻止

“...已被 CORS 政策阻止:没有‘访问控制允许来源’”

离子 - 被 CORS 政策阻止:没有“访问控制允许来源”

Django Vue Js Axios 已被 CORS 政策阻止

Cors 策略阻止 JSON 请求

由于 CORS 政策,.net core 5 应用程序被阻止

Axios - CORS 政策问题

Stackexchange REST API 已被 CORS 政策阻止