If you get the error No ‘access-control-allow-origin’ header is present on the requested resource, don’t worry. Today we will bring you the solutions to this problem. Let’s check them out now!
No ‘access-control-allow-origin’ header is present on the requested resource – What’s wrong?
As you know, Cross-Origin Resource Sharing (CORS for short) is a mechanism to relax the ‘Same-Origin’ policy of current browsers. That means it will allow a site running at origin A to request resources from origin B. Let us show you a clear explanation:
- We have origin A: http://mydomain.com and we would like to get resources from origin B: http://yourdomain.com
- The browser will not let us access resources from http://yourdomain.com which means it will block our request in order to protect your security.
- If you want to allow origin A to access your resources (origin B), you need to let the browser know that it is OK for origin A to access resources of origin B.
Let’s take a look at the following example to understand CORS in depth.
The ‘access-control-allow-origin’ is a CORS header. The error No ‘access-control-allow-origin’ header is present on the requested resource is trying to tell you that there is a missing CORS header or that the browser has blocked the request because of CORS policy. More specifically, it happens when a script on your website or web application tries to make a request to a resource that is not configured to accept requests from code on a different domain or subdomain. This violates the ‘Same-origin’ policy, which in turn results in the error No ‘access-control-allow-origin’ header is present on the requested resource.
How to solve the error No ‘access-control-allow-origin’ header is present on the requested resource
The first solution for you to address the error No ‘access-control-allow-origin’ header is present on the requested resource is to set up a response header allowing the browser to accept the cross-domain requests to it. With this method, you let the browser know that the cross-origin requests are allowed for the specific domain, so the browser will not block the request.
However, a response can have at most one ‘access-control-allow-origin’ header, and this header can specify only one domain. Hence, if the server wants to allow requests from various origin domains, the server needs to create an ‘access-control-allow-origin’ response header with the same value as the origin request header.
Besides, another popular way that many developers use to fix the error No ‘access-control-allow-origin’ header is present on the requested resource is to prevent CORS from blocking all domains. They will use:
Access-Control-Allow-Origin: *
However, this is not recommended because it may violate information security policies or have other negative effects.
Furthermore, you can also deal with this issue by using a reverse proxy server or WSGI server to proxy requests to your resource and then handle the Options method in the proxy. This is suitable if you want a quick fix and have a small number of cross-origin request sources. Conversely, if you need a more flexible method, it’s a good idea to add support for handling the Options method in the resource’s code effectively.
Now, let’s look at the example below of how to tackle the error No ‘access-control-allow-origin’ header is present on the requested resource by implementing CORS with a reverse proxy.
server {
listen ${NGINX_PORT};
listen [::]:${NGINX_PORT};
server_name ${NGINX_HOST};
location / {
if ($http_origin ~* "^http://www.example.com:8080$") {
add_header Access-Control-Allow-Origin "$http_origin";
add_header Access-Control-Allow-Methods "OPTIONS, POST, GET";
add_header Access-Control-Max-Age "3600";
add_header Access-Control-Allow-Credentials "true";
add_header Access-Control-Allow-Headers "Content-Type";
set $test "A";
}
if ($request_method = 'OPTIONS') {
set $test "${test}B";
}
if ($test = "AB") {
add_header Access-Control-Allow-Origin "$http_origin";
add_header Access-Control-Allow-Methods "OPTIONS, DELETE, POST, GET, PATCH, PUT";
add_header Access-Control-Max-Age "3600";
add_header Access-Control-Allow-Credentials "true";
add_header Access-Control-Allow-Headers "Content-Type";
return 204;
}
if ($test = "B") {
return 403;
}
proxy_pass "${PROXY_HOST}:${PROXY_PORT}";
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
}
Wrap Up
To sum up, we have shown you some suggested solutions to solve the error No ‘access-control-allow-origin’ header is present on the requested resource. We hope that you can deal with this trouble successfully. If you have any queries, please let us know by leaving your comment below.
Furthermore, don’t forget to visit our site and get more mobile-ready and eye-catching free WordPress themes and Joomla 4 Templates. See you in the next post.
