Level 80
@mstdmstd The resource at example.com:9090/searchWeb needs to add the Access-Control-Allow-Origin header with the value of the domain where /website-blogs is hosted.
May 14, 2019
6
Level 8
In axios request I got has been blocked by CORS policy error
Hello, 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
I try to read these data using axios and got error: https://imgur.com/a/o97xLm7
in browse I see details of the request : https://imgur.com/a/EUkyV43
My JS code:
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) => {
where this.app_url is home url of the site the app run at. Googling I found several parameters Access-Control-* must be filled, like in code above, but that did not help me. Can you say how I to fix it?
- can it be that a desicion 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...
Thanks!
Level 3
What this is telling you is basically, localhost:9090 can't send information unless you add CORS to the server, there's different ways of adding this you can try this package : https://github.com/barryvdh/laravel-cors
Level 1
Im also recomand this package : https://github.com/barryvdh/laravel-cors that's the only thing working for me
Level 8
I installed https://github.com/barryvdh/laravel-cors package and
- in file I added line in app/Http/Kernel.php
protected $middleware = [
// ...
\Barryvdh\Cors\HandleCors::class,
];
I added in middleware group I that is is not ‘/api’ internal, but external request. Is it correct?
- I left file config/cors.php without changes :
<?php
return [
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedOriginsPatterns' => [],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,
];
- 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) => {
- But the same error in request : https://imgur.com/a/wbgmrps
What is wrong ?
Level 6
This CORS thing again! I've tripped over it many times.
Checkout this Laracast where Jeffery discuss VueJS and CORS in detail.
Best,
Level 8
I payed attention that with internal request I see token : https://imgur.com/a/nFNwGs2 But in external request I do not see this токена : https://imgur.com/a/7sS7FtN
Could that be the issue?
I tried to add token manually(I check it in alert ):
alert( "app_url::"+var_dump(this.app_url) + " this.currentLoggedUser::"+var_dump(this.currentLoggedUser) )
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,
"X-XSRF-TOKEN": this.currentLoggedUser.token,
But I do not see the token in external request. Which is the right way ?
Please or to participate in this conversation.