Why Does My Angular Service Get a CORS Error: \'Requests are Only Supported for Protocol Schemes: http...\' and How Can I Fix It?

CORS Error: "Requests are Only Supported for Protocol Schemes: http..." Explanation and Resolution

When an HTTP request is made across different origins, it may be blocked by the browser due to the Cross-Origin Resource Sharing (CORS) mechanism. This restriction prevents unauthorized access to resources from origins other than the site making the request.

In the given scenario, an Angular Service is attempting to retrieve a JSON response from an Express backend running on localhost:4201/ticker. However, the request is failing with the error: "XMLHttpRequest cannot load localhost:4201/ticker. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

Despite attempting to implement CORS handling using the cors module in the Express server, the error persists. The code snippets provided reveal that the URL used in the Angular Service does not specify the protocol scheme, which is causing the CORS error.

To resolve this issue, the URL in the Angular Service should be updated to include the http:// protocol scheme. By adding "http://" to the URL, the request will be correctly interpreted as an HTTP request, allowing it to pass CORS validation.

The corrected section of code in the Angular Service:

this._baseUrl = 'http://localhost:4201/';

Once this change is made, the Angular Service should be able to successfully make the request to the Express backend and retrieve the JSON response without encountering the CORS error.

The above is the detailed content of Why Does My Angular Service Get a CORS Error: \'Requests are Only Supported for Protocol Schemes: http...\' and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!