Handle CORS

CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers. It controls which web pages are allowed to make requests to different domains. CORS prevents malicious websites from making unauthorized requests.

Understanding CORS Errors

When a CORS issue occurs, the browser typically returns one of the following error messages:

  1. CORS Request Blocked: The browser blocks the request because it violates the same-origin policy.

  2. No 'Access-Control-Allow-Origin' Header: The server does not include the required CORS headers in its response.

  3. Preflight Request Did Not Succeed: The browser sends a preflight OPTIONS request, and it does not receive a successful response from the server.

  4. Request Blocked Due to Preflight Response: The server's response to the preflight OPTIONS request indicates that the actual request is not allowed.

How to Identify a CORS Issue

You may encounter a CORS issue if:

  • You see a CORS-related error message in the browser's developer console.

  • Your AJAX or fetch requests to an external domain are being blocked.

  • You notice that the content from the external domain is not loading or is displaying incorrectly on your web page.

Dealing with CORS Issues

There are several solutions to address CORS issues:

  1. Server-Side Proxy: Consider setting up a server-side proxy that fetches content from your server and serves it to our app. This way, our app makes requests to the same domain (the proxy server), avoiding CORS issues.

  2. CORS Headers: Configure your server to include the necessary CORS headers in its responses. The key header is Access-Control-Allow-Origin, which specifies which domains are allowed to access your resources.

Configuration Options for Different Scenarios

The approach you choose depends on your specific integration scenario:

  • If You Control the Server: Modify your server's CORS configuration to allow requests from our app's domain. Consult your server's documentation for guidance on CORS configuration.

  • If You Don't Control the Server: Consider using a server-side proxy.

PreviousUse Rubens Price ServiceNextCustomisation

Last updated