Access Control Allow Origin issue in Angular 2

99封情书 提交于 2019-11-26 07:48:24

问题


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.


回答1:


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.




回答2:


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)



回答3:


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.




回答4:


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

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




回答5:


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.



来源:https://stackoverflow.com/questions/41683195/access-control-allow-origin-issue-in-angular-2

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!