No ‘access-control-allow-origin’ header is present on the requested resource

If you get the error No ‘access-control-allow-origin’ header is present on the requested resource, don’t worry. Let’s feel relaxed because today we will bring you the solutions for this trouble. Let’s check 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 will be ok if origin A accesses resources of origin B.

Let’s take a look at the following example to get in-depth knowledge about CORS.

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, when a script on your website or web application is trying to make a request to a no-configured resource to accept requests from code that does not have the same domain or sub-domain. This is violating 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. When you implement the method, you are trying to let the browser know that the cross-origin requests are allowed for the specific domain which means the browser will not block the request.

However, a response just has at most an ‘access-control-allow-origin’ header and this header just specifies only one domain. Hence, if the server wants to allow requests from various origin domains, it’s necessary for the server 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: *

On the other hand, it’s not recommended because it may cause the violation of an information security policy or other negative influences.

Furthermore, you can also deal with this issue by using a reverse proxy server or WSGI server to request the proxy to your resource and then handle the Options method in the proxy. This is a suitable way if you hope to get a quick fix with the small number of sources of cross-origin requests. Conversely, if you need to get a more flexible method, it’s a good idea for you to add support in order to handle the Options method in the resource’s code effectively.

Now, let’s follow the example below about how to tackle the error No ‘access-control-allow-origin’ header is present on the requested resource via 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 posts.

• Author
• Recent Posts

LT Digital Team (Content & Marketing)

Welcome to LT Digital Team. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Latest posts by LT Digital Team (Content & Marketing) (see all)

• How to place menu items in helix joomla 5 ? - December 14, 2024
• How to reduce the size of helix 2 layout ? - December 14, 2024
• What’s J4 starter template and how to use it - December 3, 2024