You’re testing an API with Postman and everything works fine, but when you switch to your JavaScript client, you suddenly hit CORS error. Frustrating, right? This article breaks down why this happens and how you can fix it.
What’s Going On?
When you make an API request in Postman, you aren’t subjected by the browser’s security rules. Postman is essentially just another HTTP client, so it doesn’t enforce the same-origin policy. On the other hand, your browser does enforce these rules, which means when your JavaScript code makes a cross-origin request (a request to a different domain, protocol, or port), the browser checks if the server has set the appropriate CORS headers.
Cross-Origin Requests Explained
Let’s say your web app is hosted at https://example.com but the API you’re trying to access lives at https://api.example.org. Since these are different origins, your browser treats the request as cross-origin. For the browser to accept the response, the API server must include an Access-Control-Allow-Origin header that explicitly allows requests from your app’s origin, or the wildcard * if it’s safe to allow all origins.
Without this header, your browser will block the response, even though Postman doesn’t care about CORS restrictions. That’s why you see the error message:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
How to Solve the Problem
If You Own the API
If you have control over the API backend, the solution is straightforward. You need to configure your API to include the necessary CORS header. How you do this depends on your backend framework. In frameworks such as Express (Node.js), Django, Flask, or Ruby on Rails, you typically add a middleware or adjust your configuration to include the CORS header in your responses:
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors()); // This will add the necessary headers
// Your routes here
app.get("/data", (req, res) => {
res.json({ message: "Hello, world!" });
});
app.listen(3000, () => console.log("Server running on port 3000"));
CORS configuration in Express JS
If You Don’t Own the API
Sometimes you’re working with third-party APIs over which you have no control. In these cases, you can work around the issue by using a CORS proxy. A CORS proxy acts as an intermediary, it makes the request to the external API, then sends the response back to you with the appropriate CORS headers.
A proxy like Corsfix can help you achieve this. The idea is to send your request through the proxy so that it appends the necessary headers for your browser to accept the response:
const corsProxyUrl = "https://proxy.corsfix.com/?"; // The proxy URL
const targetUrl = "https://external-api.com/data";
fetch(corsProxyUrl + targetUrl)
.then((response) => response.json())
.then((data) => console.log("Data from API:", data))
.catch((error) => console.error("Error:", error));
CORS proxy usage example
Conclusion
In summary, Postman doesn’t enforce CORS because it’s not a browser, so it works without any fuss. When using JavaScript in the browser, you need to respect the cross-origin restrictions. If you control the API, simply add the correct CORS headers. If you don’t, a CORS proxy like Corsfix can be a solid workaround. It's free to get started, and only upgrade when you go into production.
Top comments (2)
Nice explanation of an issue many developers face! What are some potential security implications of using CORS proxies in production?
Hi Nevo, thanks for reading my article!
Regarding security, some things to look out for are:
As the data you are fetching basically goes through the proxy, you need to make sure you are using a CORS proxy that you trust, and does not store or modify request/response data
If you are fetching an API that requires authentication (e.g. API key), you need to use a proxy that can handle secrets, as using plaintext API key in the frontend will expose it in the browser network request
I'm glad to share that Corsfix has these covered. It does not store or modify your request/response data, and support handling secrets, so your credentials stay safe