I’ve tried to fetch data from WordPress API in Vue App.
I am using DigitalOcean with Apache.
I’ve set Header set Access-Control-Allow-Origin "*"
in vhost.
But now I’ve got an error like this:
Access to XMLHttpRequest at xxx from origin ‘http://localhost:3000‘ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:3000, *’, but only one is allowed.
I am using axios for requests.
Do you have any ideas what’s going on?
Is it server side issue or should I set something in axios config?
Thanks.
2
Answers
This is a server-side issue. You need to enable CORS in your apache config, by either:
Header set Access-Control-Allow-Origin "*"
– meaning that all origins are allowed to make requests to this serverHeader set Access-Control-Allow-Origin "http://localhost:3000"
This tells the server to accept requests from this origin(s), to further explain.
https://enable-cors.org/server_apache.html
Change your header set statement to:
Header always set Access-Control-Allow-Origin “*”
Otherwise Apache will prepend origin in request to the header, which causes the issue.