Menu
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.
609
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.
Enable CORS with Proxy Configuration Settings in Angular. To enable CORS via proxy configuration, we need to generate a src/proxy. conf. json file inside the Angular root folder and also place the following code inside of it. We used the secure property to enable the deliberate use of SSL.
Proxy Requests to Enable CORS in Angular Basically, if our Angular application is running port 8000 and our back end is on 5000, we need to proxy requests from port 5000 to port 8000. Does that sound complex? Let's demystify it! Inside the src folder of your application, create a new file called proxy.
There is no CORS issue and if we check the network the original Web request is hidden with the URL of the Angular server. Proxy.conf.json can be used to redirect the request to different servers. Hope you all enjoyed reading this article.
The CORS specification introduces several new HTTP headers that enable cross-origin requests. If a browser supports CORS, it sets these headers automatically for cross-origin requests; you don't need to do anything special in your JavaScript code. Here is an example of a cross-origin request.
This should open our Angular application in the browser. Visit http://localhost:8000 in your browser, and check the console. You'll find a CORS error thrown by the browser. CORS error in Angular. Also, the browser has blocked your request, and you won't be able to see the response of the request.
When the CORS policy is applied either: Globally by calling app.UseCors in Startup.Configure. Using the [EnableCors] attribute. ASP.NET Core responds to the preflight OPTIONS request. Enabling CORS on a per-endpoint basis using RequireCors currently does not support automatic preflight requests.
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:
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
