How Can I Access Resources from Different Origins Using Fetch When `mode: 'no-cors'` Fails?

Trying to Use Fetch with mode: no-cors

In this article, we'll address the issue of using fetch with mode: 'no-cors' and explore viable alternatives to disable CORS.

Understanding the Issue

When attempting to access a resource from a different origin, such as an external API, browsers implement a security measure known as the same-origin policy. This policy prevents JavaScript code from directly accessing resources from other origins unless the server responds with appropriate CORS headers.

When you encounter the error "No 'Access-Control-Allow-Origin' header is present on the requested resource," it means the server you're trying to fetch data from doesn't allow access to its resources from your current origin.

Disabling CORS

It's important to note that setting mode: 'no-cors' in your fetch request doesn't actually disable CORS. Instead, it prevents your frontend JavaScript code from accessing the response body and headers. In most cases, this is not what you intend to do.

Using a CORS Proxy

The recommended solution is to use a CORS proxy. A CORS proxy acts as an intermediary between yourfrontend code and the target server. It makes the request to the target server, receives the response, adds the necessary CORS headers, and then passes the modified response back to your frontend code. This allows your frontend code to access the resource without directly violating the same-origin policy.

Deploying Your Own CORS Proxy

You can easily deploy your own CORS Anywhere proxy following these steps:

1. Clone the CORS Anywhere repository: git clone https://github.com/Rob--W/cors-anywhere.git
2. Change to the cors-anywhere directory: cd cors-anywhere/
3. Install dependencies: npm install
4. Create a Heroku app: heroku create
5. Push the code to Heroku: git push heroku master

After these steps, you'll have your own CORS Anywhere server running on Heroku.

Using the CORS Proxy

To use your CORS proxy, simply prefix your request URL with the proxy URL, for example:

https://cryptic-headland-94862.herokuapp.com/https://example.com

By using a CORS proxy, you can bypass the same-origin policy and access resources from different origins in your frontend code.

The above is the detailed content of How Can I Access Resources from Different Origins Using Fetch When `mode: 'no-cors'` Fails?. For more information, please follow other related articles on the PHP Chinese website!