Access Control Allow Origin issue in Angular 2

Question

I have a problem with getting data from my node.js server.

The client side is:

    public getTestLines() : Observable<TestLine[]> {
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:3003/get_testlines', options)
                .map((res:Response) => res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

in server side I also set the headers:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

But I get an error

"XMLHttpRequest cannot load http://localhost:3003/get_testlines. 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."

How can I fix it? When I remove headers it says that this header is required.

Are you using Crome ?If yes then please enable Access-Control-Allow-Origin . Crome has a plugin for cors . For IE you should not get this error after setting headers — Yashveer Singh, Jan 16 '17 at 18:56
This is most likely a server-side issue. Are you sure your response actually sends the headers on the `OPTIONS` request? You can try postman to check the headers, for example. — Randy, Jan 16 '17 at 19:51

score 9 · Accepted Answer · answered Jan 16 '17 at 20:19

Access-Control-Allow-Origin is a response header, not a request header.

You need to have it appear on the response, not the request.

You have attempted to put it on the response:

resp.setHeader('Access-Control-Allow-Origin','*')

… but it hasn't worked.

This is probably because you haven't put it on the response to the right request. The error message says:

Response to preflight request doesn't pass access control check

You have done something to make the request preflighted. This means that before the browser makes the GET request you are trying to make, it is making an OPTIONS request.

This is, presumably, being handled by a different piece of code on your server so the line resp.setHeader('Access-Control-Allow-Origin','*') isn't being hit.

One thing that causes a preflighted request to be made is the addition of request headers (other than a small number of exceptions). Adding Access-Control-Allow-Origin to the request will trigger a preflighted request, so the first thing to do to try to fix the problem is to remove Access-Control-Allow-Origin from the request.

If that fails, then you need to set up your server so it can respond to the OPTIONS request as well as the GET request.

score 2 · Answer 2 · edited Aug 17 '17 at 17:17

Access-Control-Allow-Origin is a response header, not a request header you need to fix the permission in your backend. so you must create cors.js file that contains all necessary permissions.

function crosPermission(){
  this.permission=function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
    next();
  }
}

module.exports= new crosPermission();

next step You need to add some line in your app.js

    var cors=require('./cors');
    app.use(cors.permission)

score 1 · Answer 3 · answered Jan 16 '17 at 20:07

1

Don't set Access-Control-Allow-Origin on the request, it is never needed there. You should double-check if the header is present on the response (check it in the developer console). It would be helpful if you shared more of the backend code.

answered Jan 16 '17 at 20:07

Mezo Istvan

2,664
1
14
17

score 0 · Answer 4 · answered Oct 25 '17 at 10:07

0

If this is going to be rest API => http://localhost:3003/get_testlines

then use @CrossOrigin(origins = "*") to solve the cross domain issue

answered Oct 25 '17 at 10:07

aabbcc

19
1
8

score 0 · Answer 5 · answered Sep 23 '19 at 14:11

This has nothing to do with the client. Very simply you can solve this problem by adding Cors to the Configure method. like this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            InitializeDatabase(app);

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMiddleware<ExceptionToResultMiddleware>();

            app.UseSwagger();

            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
            });

            app.UseCors(s => s.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());  ==> This section

            app.UseMvc();
        }

Now Restart your project and check again.

Access Control Allow Origin issue in Angular 2

5 Answers5

Linked