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.
This is a server-side issue. You need to enable CORS in your apache config, by either:
Setting Header set Access-Control-Allow-Origin "*" - meaning that all origins are allowed to make requests to this server
Setting Header 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.
Related
I'd like to allow all origins to fetch resources from my apache server.
Instead of adding:
Access-Control-Allow-Origin: *
I would like my server to craft a special response with :
Access-Control-Allow-Origin: <the value of the Origin received in the request>
Is there something I can add to httpd.conf to achieve this ?
Seems it can be achieved by adding those two lines:
SetEnvIf Origin ".*\S.*" ORIGIN=$0
Header always set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
The regex pretty much means anything except newline, tab, and space, so as long as the Origin is not empty add it to the response header.
I am trying to load web fonts from a CDN, but am getting a Cross Origin Request error. I have set the following headers in my httpd conf file:
Header Add Access-Control-Allow-Origin: my-cdn-domain
and
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
and I see the Access-Control header in the console, but the fonts still do not load.
Does anyone have any ideas?
It turns out that this had to do with us moving the site over to https. When we moved the site, we didn't update the origins in the cdn to be https also and that was causing the source to actually be our non-https server!
Header Add Access-Control-Allow-Origin: my-cdn-domain
Your CDN domain has to give permission to your HTML domain, not the other way around.
Suddenly, seemingly without changing anything in my web app, I started getting CORS errors when opening it in Chrome. I tried adding an Access-Control-Allow-Origin: * header. Then I get this error:
XMLHttpRequest cannot load http://localhost:9091/sockjs-node/info?t= 1449187563637. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3010' is therefore not allowed access.
But as you can see in the following image, there is no Access-Control-Allow-Credentials header.
WTF? Chrome bug?
My page is loaded at http://localhost:3010 and that server also uses Access-Control-Allow-Origin: * without problems. Is there a problem if the two endpoints both use it?
"credentials flag" refers to XMLHttpRequest.withCredentials of the request being made, not to an Access-Control-Allow-Credentials header. That was the source of my confusion.
If the request's withCredentials is true, Access-Control-Allow-Origin: * can't be used, even if there is no Access-Control-Allow-Credentials header.
Requests withCredentials:true, on a server configured with Access-Control-Allow-Origin: * CAN be used, but you will need some more extra config on your server:
Using Access-Control-Allow-Origin=* on the server, it will not allow access to any resource (that requires credentials) on any xhr CORS request.
Workarounds:
Make that remote resource on the server accesible without credentials
( and use xhr.withCredentials = false )
Create a rewrite rule on
the server, to modify the response header
Access-Control-Allow-Origin=* to the request's origin. You can
also apply this rewrite under certain criteria, for example, if
request is using certain port or it comes from a list of whitelisted
domains.
Here is some article that explains how to do this on a IIS server, but you can do this in many other servers:
PS: in case of using credentials, you will also need the following header on your server's response: Access-Control-Allow-Credentials=true
PS2: only 1 value is allowed to "access-control-allow-origin" paramenter. If you try to use for instance two domains: domain1.com domain2.com, it won't work.
I solved same problem by using these steps..
1) disable your chrome extension "Allow-Control-Allow-Origin"
2) add these into your service
var xhr = new ();
xhr.withCredentials = true;
Using apache mod_proxy 2.5 I'm trying to merge or replace an existing access-control-allow-origin header with mod_headers in a proxypass location.
the answer returned from proxied backend already includes a access-control-allow-origin header which I'd like to merge or replace
Header always merge Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "OPTIONS, GET"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token, x-smp-appcid"
This results in a header duplicate which raises an error in all browser cause this header can only occur once.
same is for Header always set although this should replace the existing header.
I also tried to use if module to first check for the headers occurence and only set if unset. but it's somehow hard to look into response headers.
any help is appreciated
I got through the same problem by setting the Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers only when its a preflight request
The second request ( POST, DELETE, PUT etc ) which is handled by the proxied backend ( which already sends the required headers ) is not a preflight request and hence the headers would not be set again by the Apache rules.
To check for preflight request, you could check whether the request contains:
REQUEST_METHOD == OPTIONS
Access-Control-Request-Method !-= ""
Origin != ""
Hope this helps.
My website supports both http and https protocols. However using the code below in .htaccess file, I can only set one domain to allow CORS requests:
Header set Access-Control-Allow-Origin: http://example.com
I want to allow CORS for both http and https versions of my site (not just "*") and tried the solutions here:
Access-Control-Allow-Origin Multiple Origin Domains?
But the problem is that all solutions rely on Origin header in the request which may not exist and also is not secure. (anyone can put a origin header in their request)
I want to know if the request has been served over https and use this info to set the proper CORS header. Something like this:
SetEnvIf servedOverHttps httpsOrigin=true
Header set Access-Control-Allow-Origin: https://example.me env=httpsOrigin
SetEnvIf notServedOverHttps httpOrigin=true
Header set Access-Control-Allow-Origin: http://example.me env=httpOrigin
How can I find out that it's a https request?
Have you tried using HTTPS variable?
It will be set to "on" for all https requests.
Your .htaccess should look like this
Header set Access-Control-Allow-Origin: http://example.com #default
Header set Access-Control-Allow-Origin: https://example.com env=HTTPS #override if https