How to make CORS-enabled HTTP requests in Angular 2?

dragonmnl

The error is the following:

XMLHttpRequest cannot load http://some_url.herokuapp.com/api/some_api/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 503.

when calling

return this._http.post(requestUrl, JSON.stringify(requestBody), requestOptions)

I had troubles with CORS (when working with Angular 1) in the past and I remember that once CORS were activated server-side,I had to transform the http request to parse certain HTTP headers.

I am quite confused about how it should work, so any explanation is very welcome.

Thierry Templier

In fact, it's not an Angular2 issue but a problem at the server side. The preflighted OPTIONS request needs to return an Access-Control-Allow-Origin header in its response.

Sending the Origin header in the original request will enable the CORS support on the server side. This header is automatically added by the browser when it detects that the domain of the request isn't the same as the caller's.

Be careful when implementing the preflight OPTIONS request on the server side since credentials aren't sent at this level. They are only sent within the target request. It seems to be the problem since you have 503 error. You're trying to check if the OPTIONS request is authenticated but it's not actually the case...

See this article for more details:

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to allow all requests in spring boot enabled with CORS?

How to allow all requests in spring boot enabled with CORS?

How to configure spring's RestTemplate to make http2 requests?

Angular 2 http delete doesn't make network requests

How to make synchronous http calls in angular 2

Angular 2 - Chaining http requests

Angular 2 - Sequential HTTP requests

CORS-enabled server not denying requests

Angular2 - How to chain async http requests and stop if fails

how to make 2 dependent http request in Angular 2

Angular 2 consecutive http requests

Angular 4 - How to make bulk http syncronous requests

How do you make HTTP requests with Raku?

How to make concurrent HTTP requests with basic authentication

How to make a sequence of http requests in Angular 6 using RxJS

Using Axios from React to make http requests to express is failing after pre-flight with CORS errors. Enabled CORS on the server and still not working

How to make the submit button enabled in angular

How do you enable CORS requests to a Google Compute Engine IAP enabled Load Balancer?

How to make http requests using HTTP Intercepters

How to make HTTP client requests with Deno

Angular - How to delay HTTP Requests

Spring/Angular CORS issue while CORS is enabled

How to make HTTP requests using Plink

How to make multiple http requests?

How to make http2 requests with persistent connection ? (Any language)

How to Wait for Angular2 to Handle Dynamic Multiple Http Requests?

How to make HTTP requests in angular and get the body from the object?

Angular, how to make consecutive, dependent http get requests

Nest.js/Angular - CORS Enabled but still getting a CORS error while making requests