No 'Access-Control-Allow-Origin' header Angular2

Question

I hit a rest service with an Angular2 application.

When doing so, I get a message back stating:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I have read several posts here, and concluded that inorder to get rid of this issue, I need to specify the header from my server response. Which is exactly what I have done.

If I issue a postman request to the same url, I can see the header returned back:

Access-Control-Allow-Headers →Content-Type
Access-Control-Allow-Method →GET, POST
Access-Control-Allow-Origin →*

Do I need to attach any additional headers to make this work?

You need to return those headers also for the `OPTIONS` request, which will happen before `GET` or `POST` and only in the browser. Postman won't send the "preflight request". — Maximilian Riegler, Nov 09 '16 at 15:02
@rinukkusu might you have some sample code, or a page I can visit for this? — angryip, Nov 09 '16 at 15:05
What serverside software are you using? Express with NodeJS? — Maximilian Riegler, Nov 09 '16 at 15:07
Sadly I don't know Java server side very well - maybe this helps you: http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/ — Maximilian Riegler, Nov 09 '16 at 15:14

score 2 · Answer 1 · edited May 23 '17 at 12:25

REST request sometimes require preflight OPTIONS requests to the selected resource. You can read more about this here:

https://developer.mozilla.org/en-S/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

I have always done this manually, but if you are using RestEasy (which comes with JBoss), since version 3.09 there is a build in helper. Simple usage is explained in this post.

Problems Resteasy 3.09 CorsFilter

If possible I would still advise you not to use CORS, and use a reverse proxy instead.

score 0 · Answer 2 · 2016-11-09T22:37:00.743

There are 2 ways to solve this pretty easy, you can either install an extension in your browser which lets you do cross origin request. Or you create proxy.conf.json file:

{
  "/proxy": {
    "target": "http://route to your rest service",
    "secure": false
  }
}

then you go to your package.json file and change the start configuration:

"scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",

For me this works, check that your REST API is available with the name where I put

"/proxy"

change your service/component which creates the get-requests that the requested url matches your name in proxy.conf.json

Example REST call:

private _restUrl = '/proxy/';    

public testRestConnection = (): Observable <string> => {
let restUrl = this._restUrl + 'path you need';
return this._http.get(restUrl)
  .map((response: Response) => <string>response.text())
  .catch(this.handleError);

}

score -1 · Answer 3 · answered Nov 09 '16 at 15:09

-1

@angryip, what browser are you using. It sounds CORS issue. I have this issue in one of my Web API project in .net environment and to resolve this issue I had to install icrosoft.AspNet.WebApi.Cors. I'm not sure what kind development environment you are dealing with. Here is the link I found useful for Enabling CORS : https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

answered Nov 09 '16 at 15:09

rkg

1
1

@angryip, it's not the answer but I can't add comment in your thread that's whyt I have to add as a answer. Thanks – rkg Nov 09 '16 at 15:13

No 'Access-Control-Allow-Origin' header Angular2

3 Answers3