Axios 请求:被 CORS 政策阻止 [英] Axios Request: Blocked by CORS Policy
问题描述
在 laravel 5.8 中,/"vue": "^2.5.17"/"axios": "^0.18"
,我需要读取从 postman 读取的外部数据 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 = [
// ...
BarryvdhCorsHandleCors::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
Create a middleware 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 = [
...
AppHttpMiddlewareCors::class
]
这篇关于Axios 请求:被 CORS 政策阻止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!