How to Solve 'XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check' Errors?

Access Control Denied: Troubleshooting CORS in Web Development

Issue:

When using ngResource to access a REST API on Amazon Web Services, you encounter the following error:

XMLHttpRequest cannot load <url>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<origin>' is therefore not allowed access.

Cause:

This issue stems from Cross-Origin Resource Sharing (CORS) restrictions, which prevent a web application on one domain from making requests to other domains without explicit permission.

Solutions:

There are multiple approaches to address CORS issues:

1. Disable CORS:

• In Chrome, visit chrome://flags/#disable-web-security
• Set "Disable web security" to "Enabled"
• Note: This solution should only be used for development purposes.

2. Browser Plugins:

• Install browser plugins that disable CORS checks, such as CORS Unblock.

3. Proxy Server:

• Use a proxy server, such as Nginx, to handle cross-origin requests. This makes the browser believe requests are coming from the localhost.

4. Server Configuration:

• Configure your server to add Access-Control-Allow-Origin headers to responses. Refer to the Enable CORS website for specific instructions based on your server.

5. HTTP Example with Promises:

const makeRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(options.method, url);
    request.setRequestHeader('Accept', 'application/json');

    request.onload = () => {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject({
          status: request.status,
          statusText: request.statusText
        });
      }
    };

    request.onerror = () => {
      reject({
        status: request.status,
        statusText: request.statusText
      });
    };

    request.send(options.body);
  });
};

The above is the detailed content of How to Solve 'XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check' Errors?. For more information, please follow other related articles on the PHP Chinese website!