Access to fetch at '' from origin '' has been blocked by CORS policy

[Stexxe]

If you see an error message similar to the following one in your browser, it means the browser blocked your request because of a CORS (Cross-Origin Resource Sharing) policy violation:

Access to fetch at 'https://example.com/' from origin 'https://www.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What is CORS?

CORS is a security feature built into web browsers. It controls which websites can access resources (like data or images) from a different server. When a script on one website (e.g., https://www.google.com) tries to access resources from another website (e.g., https://example.com), the browser checks if the server at https://example.com has explicitly allowed this. More information about CORS can be found on MDN.

This error usually happens when the server you're trying to reach doesn't include the necessary Access-Control-Allow-Origin header in its response. This header tells the browser which origins are allowed to access its resources.

How to Fix It

If you control the server

Configure your server to send the correct CORS headers. This tells the browser it's okay to access resources from specific origins. For Ktor server applications, you can use the CORS plugin to set this up.

If you don't control the server

Set up a proxy server. This proxy will forward your requests to the target server while also adding the necessary CORS headers, allowing your browser to access the resources.