Immediate Fix
The fastest way to fix the “Cross-Origin Request Blocked” error is to configure your backend server to include the Access-Control-Allow-Origin header in its responses.
If you are using Node.js with Express, you can resolve this instantly by installing the CORS middleware:
npm install corsThen, apply it to your application to allow all origins:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // This enables all CORS requestsFor a manual fix without middleware, you must set the following headers in your server response:
| Header | Value | Description |
|---|---|---|
| Access-Control-Allow-Origin | * (or your domain) | Specifies which domains can access the resource. |
| Access-Control-Allow-Methods | GET, POST, PUT, DELETE | Defines allowed HTTP methods. |
| Access-Control-Allow-Headers | Content-Type, Authorization | Specifies allowed request headers. |
Technical Explanation
CORS, or Cross-Origin Resource Sharing, is a security mechanism implemented by web browsers. It follows the “Same-Origin Policy,” which prevents a web page from making requests to a different domain than the one that served it.
An “Origin” is defined by three components: the Protocol (HTTP/HTTPS), the Domain (example.com), and the Port (80, 443, 3000). If any of these three differ between the frontend and the backend, the browser blocks the request unless the server explicitly gives permission.
When you perform a complex request (like using PUT or sending application/json), the browser sends a “Preflight” request. This is an OPTIONS call to check if the server understands the CORS protocol. If the server doesn’t respond with a 200 OK and the correct headers, the actual request is never sent.
Alternative Methods
1. Using a Proxy in Local Development
If you are using React, Vue, or Angular, you can bypass CORS during development by using a proxy. In a React package.json, add the following line:
"proxy": "http://localhost:5000"This tells the development server to forward any unknown requests to your backend server, making it appear as if they share the same origin.
2. Browser Extensions (Temporary Fix)
You can use browser extensions like “Allow CORS” to disable the security check in your local environment. However, this is only a temporary fix for the developer and will not work for end-users visiting your website.
3. JSONP (Legacy Method)
JSON with Padding (JSONP) is an older technique that wraps data in a script tag. It is generally considered insecure and should only be used as a last resort when working with very old legacy systems that do not support CORS headers.
4. Server-Side Requesting
Since CORS is a browser-side restriction, you can bypass it by making the request from your own server instead of the client’s browser. Use your backend to fetch the data from the third-party API and then serve it to your frontend.