How to Fix “No ‘Access-Control-Allow-Origin’ Header” CORS Error in JavaScript

Learn how to fix the “No ‘Access-Control-Allow-Origin’ header” CORS error in JavaScript by configuring CORS headers in Nginx, Apache, or Node.js.

Web developers often encounter the dreaded CORS error while integrating APIs, scripts, or external resources across domains. A typical message looks like this:

Access to script at 'https://cdn1.findnearme.io/client.js' from origin 'https://www.gowrishankar.me' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error is one of the most common issues when working with web security and cross-domain communication. In this article, we’ll explore what causes this error, why browsers enforce it, and how to fix it properly across different server environments.

What Is a CORS Error?

CORS stands for Cross-Origin Resource Sharing. It’s a browser security mechanism that restricts web pages from making requests to a different domain than the one that served the web page.

For example:

• Your website: https://www.gowrishankar.me
• Script hosted at: https://cdn1.findnearme.io/client.js

When the browser detects a cross-origin request, it checks whether the target server allows it by looking for the following response header:

Access-Control-Allow-Origin: https://www.gowrishankar.me

If this header is missing, the browser blocks the request to protect users from malicious websites trying to access data from other domains.

Root Cause of the Error

The root cause is simple:
The target server (cdn1.findnearme.io) did not include the proper CORS headers in its response.

Without this header, browsers assume the request is unauthorized and prevent the script or API response from being accessed by the page.

How to Fix the CORS Error

1. Configure CORS in Nginx

If your CDN or web server runs on Nginx, add the following lines inside your configuration block:

location / {
    add_header 'Access-Control-Allow-Origin' 'https://www.gowrishankar.me';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept';
}

If you want to make it public (less secure), you can use:

add_header 'Access-Control-Allow-Origin' '*';

2. Configure CORS in Apache

For Apache servers, edit your .htaccess file or virtual host configuration:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://www.gowrishankar.me"
    Header set Access-Control-Allow-Methods "GET, OPTIONS"
    Header set Access-Control-Allow-Headers "Origin, Content-Type, Accept"
</IfModule>

Restart Apache to apply the changes.

3. Configure CORS in Node.js (Express Example)

If your CDN or backend is built with Node.js and Express:

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://www.gowrishankar.me');
  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');
  next();
});

Alternatively, you can use the official CORS middleware:

npm install cors

Then enable it:

const cors = require('cors');
app.use(cors({ origin: 'https://www.gowrishankar.me' }));

4. Host the Script Locally

If the script is static and doesn’t need frequent updates, you can host it directly on your website:

<script src="/js/client.js"></script>

This eliminates cross-domain requests entirely and improves performance by reducing dependency on external servers.

5. Verify Your Fix

After updating the configuration:

1. Clear your browser cache.
2. Reload your website.
3. Open Developer Tools → Network tab.
4. Check the response headers of the resource.

You should see something like:

Access-Control-Allow-Origin: https://www.gowrishankar.me

If the header is present, the CORS issue is resolved successfully.

Conclusion

CORS errors are designed to protect users, not to frustrate developers. Understanding how CORS works is crucial for building secure and interoperable web applications.

By configuring your server properly or hosting scripts locally, you can eliminate these cross-origin issues and ensure seamless integration between your frontend and backend systems.