新的HttpHeaders（）。set（）未设置标头-Ionic / Angular

Question

我正在使用NodeJs和Ionic v3创建一个小应用程序，但我陷入了CORS错误：

  

无法加载http://localhost:3000/crm/getAllClients：响应   预检请求未通过访问控制检查：否   请求中存在“ Access-Control-Allow-Origin”标头   资源。因此，不允许原点“ http://localhost:8100”   访问。

我已经在nodeJs中设置了CORS，

app.use(cors());

我要使用Ionic发出HTTP请求：

import {HttpClient, HttpHeaders} from "@angular/common/http";

这是我在Ionic服务中的代码：

 initHeaders() {
    let headers = new HttpHeaders()
      .set('Access-Control-Allow-Origin', "*")
      .set("Content-Type", "application/json")
      .set("Access-Control-Expose-Headers", "Content-Length");

    return headers;
  }

  getAllClients () {
    return this.http.get(this.domain + 'crm/getAllClients', {headers: this.initHeaders()});
  }

以下是未设置标头的标头：

我做错什么了吗？

Answer 1

我过去也有类似的问题。据我了解您没有做错任何事情，您的三个标头位于“访问控制请求标头” 中（在您的屏幕截图中，位于“请求标头” 下）。 浏览器将所有CORS标头加入其中，并将它们放在“ Access-Control-Request-Headers” 中。

我敢打赌，节点中的cors配置存在问题。我会在您的Express应用中尝试以下方法：

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Headers", "Access-Control-Expose-Headers, Content-Type, Accept");
next();
});

代替

app.use(cors())

或者在添加路由之前检查是否正在编写app.use（cors（）），以便路由使用cors。

Answer 2

我的问题是我在节点上的app.js上设置了路由后调用了cors中间件！

// set it before routes !
app.use(cors());

app.use('/', index);
app.use('/crm', crm);