Question

我从node.js服务器获取数据时遇到问题。

客户端是：

import static org.springframework.data.domain.Sort.Direction.ASC;
import static org.springframework.data.mongodb.core.aggregation.Aggregation.*;
import static org.springframework.data.mongodb.core.query.Criteria.where;

Aggregation agg = newAggregation(match(where("st").is("i").and("@").gte(new Date()).lte(new Date()).and("c").is("REQ_RCV")),
            group(fields("b").and("HOURLY", "$@h")).count().as("count"),
            sort(ASC, Aggregation.previousOperation()));

List<BasicDBObject> dbObjects = mongoOperations.aggregate(agg, "collection_name", BasicDBObject.class).getMappedResults();

在服务器端我也设置了标题：

    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')); 
}

但是我收到了错误

＆＃34; XMLHttpRequest无法加载http://localhost:3003/get_testlines。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3000＆＃39;因此是不允许的。接入＆＃34;

我该如何解决？当我删除标题时，它表示此标题是必需的。

Answer 1

Access-Control-Allow-Origin是响应标头，而不是请求标头。

您需要在响应中显示它，而不是请求。

您试图将其置于回复中：

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

......但它还没有奏效。

这可能是因为您还没有将其放在对正确请求的回复上。错误消息显示：

对预检请求的回复未通过访问控制检查

您已完成某事以使请求获得预检。这意味着在浏览器发出您正在尝试的GET请求之前，它正在发出OPTIONS请求。

这可能是由服务器上的不同代码处理，因此行resp.setHeader('Access-Control-Allow-Origin','*')未被点击。

导致预检请求的一件事是添加请求标头（除少数例外情况外）。将Access-Control-Allow-Origin添加到请求会触发预检请求，因此尝试解决问题的第一步是从请求中删除Access-Control-Allow-Origin

如果失败，那么您需要设置服务器，以便它可以响应OPTIONS请求以及GET请求。

Answer 2

Access-Control-Allow-Origin是响应标头，而不是请求标头 您需要修复后端的权限。所以你必须创建包含所有必要权限的cors.js文件。

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();

下一步 您需要在app.js

中添加一些行

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

Answer 3

不要在请求上设置Access-Control-Allow-Origin，在那里永远不需要它。您应该仔细检查响应中是否存在标题（在开发人员控制台中检查它）。如果您共享更多后端代码，将会很有帮助。

Answer 4

如果这将是休息API =＆gt; http://localhost:3003/get_testlines

然后使用@CrossOrigin（originins =“*”）来解决跨域问题

Answer 5

这与客户端无关。很简单，您可以通过将Cors添加到Configure方法来解决此问题。像这样：

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();
        }

现在，重新启动项目，然后再次检查。

访问控制允许Angular 2中的原始问题

5 个答案: