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 {
    let hea         


        

Answer 1

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.

Answer 2

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

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

Answer 3

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)

Answer 4

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.

Answer 5

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.