Quick answer
CORS error occurs when the browser blocks a request to another domain because the server did not send the appropriate `Access-Control-Allow-Origin` header. The solution is on the server: add the allowed origin, methods, and headers, or use a proxy during development. Do not try to bypass it on the frontend.
How to recognize the problem
- The browser console shows: "Access to fetch at ... has been blocked by CORS policy"
- API call works in Postman or curl, but not in the browser
- Network request has status 0 or (failed) in the Network tab
- Appears only on the local development server, not in production
- Error occurs after adding a new domain or subdomain
Most common causes
Missing Access-Control-Allow-Origin
The server does not send the `Access-Control-Allow-Origin` header or sends a value that does not match the page's origin. The browser then blocks reading the response.
Wrong origin or wildcard with credentials
If you use `credentials: 'include'`, the server must not return `*` but the exact origin. Also, `http://localhost:3000` and `http://127.0.0.1:3000` are different origins.
Preflight request not handled
For non-standard methods or headers, the browser first sends an OPTIONS request. If the server does not respond to OPTIONS with the appropriate headers, the main request is not sent.
Proxy or hosting not forwarding headers
A reverse proxy (Nginx, Apache) or serverless platform may remove CORS headers or return its own error page. Check the proxy configuration.
Wrong API URL
If the frontend calls the wrong domain, subdomain, or port, the server may not allow that origin. Check the exact URL in the code and the list of allowed origins on the server.
Step-by-step fix
- 1
Check the exact origin in the browser
Open DevTools (F12) and type
location.originin the console. Note the exact value, for examplehttp://localhost:3000. In the Network tab, find the failed request and look at the request and response headers. Pay attention toOriginin the request andAccess-Control-Allow-Originin the response. - 2
Configure CORS on the server
On the backend, explicitly allow the frontend's origin. In Node.js/Express:
app.use(cors({ origin: 'http://localhost:3000', credentials: true })). In Spring Boot:@CrossOrigin(origins = "http://localhost:3000")or global configuration. In ASP.NET Core:builder.Services.AddCors(...)andapp.UseCors(...). Always specify the exact origin, not*, if you use credentials. - 3
Handle OPTIONS preflight
Verify that the server returns 204 or 200 to the OPTIONS request with
Access-Control-Allow-MethodsandAccess-Control-Allow-Headersheaders. In Express, thecorsmiddleware does this automatically. In Nginx, addadd_header Access-Control-Allow-Origin ...andif ($request_method = OPTIONS) { return 204; }. - 4
Use a proxy during local development
If you cannot change the server, set up a proxy in your development tool. In Vite:
server.proxyinvite.config.js. In Create React App:proxyfield inpackage.json. Then call the API on a relative path (/api/...) instead of the full URL. - 5
Avoid CORS in production
The best solution is to have the frontend and API on the same origin (same domain and port). If they are not, use a reverse proxy that forwards
/apito the backend. That way the browser does not send a cross-origin request. - 6
Check proxy and hosting configuration
If you use Nginx, Apache, or cloud hosting, make sure they do not remove CORS headers. In Nginx, use
proxy_passandadd_headerat the correct level. On serverless platforms (Vercel, Netlify), configure CORS in the function response headers or in the appropriate configuration. - 7
Test with curl
Simulate preflight:
curl -i -X OPTIONS http://localhost:8080/api/podaci -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: GET". Check if the response containsAccess-Control-Allow-OriginandAccess-Control-Allow-Methods. If not, the problem is on the server. - 8
Clear cache and reload
Browsers may cache preflight responses according to the
Access-Control-Max-Ageheader. Wait for it to expire, restart the browser, or temporarily reduce that value on the server. In DevTools, enable "Disable cache" and refresh the page. Sometimes you need to restart the development server for configuration changes to take effect.
If nothing helps: advanced checks
Check if the server returns CORS headers only for successful responses. If the application throws a 500 error, CORS headers may be missing, so the browser reports CORS instead of the real error. In that case, fix the server error first. Then, use a tool like curl or Postman to see the raw response. Pay attention to redirects: if the server redirects http to https, CORS headers may be lost. Finally, check if you have multiple layers (CDN, load balancer, proxy) and if any of them strips headers. In production, never use Access-Control-Allow-Origin: * if the application uses cookies or authorization headers.
How to prevent it
- Define a list of allowed origins in the server configuration and update it whenever the domain changes.
- Use the same origin for frontend and API wherever possible, or a reverse proxy.
- Test CORS behavior with automated tests or curl before deployment.
- Avoid `*` for `Access-Control-Allow-Origin` when using credentials.
When to call a professional
If you have tried all the steps and the CORS error still blocks the application, or if you do not have access to the server configuration, contact IT support or the DevOps team. They can check the proxy, hosting, and security rules.
Software and product development · Custom apps, SaaS and an MVP in 4 to 8 weeksFAQ
Why doesn't the CORS error appear in Postman?
Postman and curl do not enforce CORS rules because they are not browsers. CORS is a browser security measure, so the error only appears in the browser. This confirms that the problem is in the server headers, not the network.
Can I fix CORS on the frontend?
You cannot permanently fix CORS on the frontend because the browser blocks reading the response, or the request itself during preflight, before the data reaches your JavaScript code. The only solution is for the server to send the correct headers or to use a proxy.
What does the error "Credential is not supported if the CORS header is wildcard" mean?
It means you are sending credentials (for example, cookies) while the server returns `Access-Control-Allow-Origin: *`. The browser does not allow this. The server must return the exact origin and `Access-Control-Allow-Credentials: true`.