Node.js Angular 8 Express Post抛出CORs错误

Node.js Angular 8 Express Post抛出CORs错误,node.js,angular,cors,Node.js,Angular,Cors,是的,我知道您通常可以通过将原始wilcard设置为“*”来修复这些问题,但我使用的是“credentials:true”,因此这将我的正常解决方案抛到了窗外 我遇到的问题是,当我尝试执行一个post请求来表示时,它似乎首先作为选项提交,然后作为get重定向,然后再次作为post重定向 我所有的“Access Control Allow XXXX”标题都显示在原始选项中,但在重定向中丢失 浏览器显示的错误为 CORS策略已阻止从源站“null”访问位于“”的XMLHttpRequest(从“”重

是的,我知道您通常可以通过将原始wilcard设置为“*”来修复这些问题,但我使用的是“credentials:true”,因此这将我的正常解决方案抛到了窗外

我遇到的问题是,当我尝试执行一个post请求来表示时,它似乎首先作为选项提交,然后作为get重定向,然后再次作为post重定向

我所有的“Access Control Allow XXXX”标题都显示在原始选项中,但在重定向中丢失

浏览器显示的错误为

CORS策略已阻止从源站“null”访问位于“”的XMLHttpRequest(从“”重定向):飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许源站

这是我的express cors设置,设置动态原点是因为我认为direct可能一直在寻找API地址作为可能的原点,然后由于我对它感到恼火而未定义和null

var app = express();
var port = process.env.PORT || 3000;

whitelist = [UI_BASE_URL, API_BASE_URL, undefined, null];

app.use(
  cors({
    allowedHeaders: [
      'Origin',
      'X-Requested-With',
      'Content-Type',
      'Accept',
      'X-Access-Token',
      'Access-Control-Allow-Origin',
      'Access-Control-Allow-Headers',
      'Access-Control-Allow-Methods'
    ],
    preflightContinue: false,
    credentials: true,
    origin: function(origin, callback) {
      if (whitelist.indexOf(origin) !== -1) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    },
    methods: 'GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE',
  })
);
这是angular公司的服务电话

const httpOptions = {
  headers: new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
  }),
};

save(myData): Observable<any> {
    return this.http.post(
      this.workSpaceReportURL + 'save',
      {
        data: myData,
        withCredentials: true,
      },
      httpOptions
    );
  }
我已经尝试了很多不同的解决方案,但它们通常都是由通常的通配符来源修复的


感谢您的建议。

看起来您使用了一种旧方法来添加跳线头。你试过这样做吗

var cors = require('cors')

app.use(cors())

在运行其他应用程序之前,请确保运行最后一个应用程序。使用

看起来您使用了一种旧方法来添加跳线头。你试过这样做吗

var cors = require('cors')

app.use(cors())

在运行其他应用程序之前,请确保运行最后一个应用程序。使用

好的,我想我意识到了解决方案是什么。我花了很长时间才意识到这一点

我设法在没有注意到的情况下删除了内容类型,并将withCredentials作为主体的一部分传递进来,而不是httpOptions(我认为这是我最初的问题)

如果几年后它能帮助其他人摆脱困境,httpOptions和post应该如下所示

我现在要站在羞耻的服务器室里

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  }),
  withCredentials: true,
};

save(myData): Observable<any> {
    return this.http.post(
      this.workSpaceReportURL + 'save',
      {
        myData,
      },
      httpOptions
    );
  }
const httpOptions={
标题:新的HttpHeaders({
“内容类型”:“应用程序/json”
}),
事实上,
};
保存(myData):可观察{
返回this.http.post(
this.workSpaceReportURL+“保存”,
{
我的数据,
},
httpOptions
);
}

好的,我想我意识到了解决方案是什么。我花了很长时间才意识到这一点

我设法在没有注意到的情况下删除了内容类型,并将withCredentials作为主体的一部分传递进来,而不是httpOptions(我认为这是我最初的问题)

如果几年后它能帮助其他人摆脱困境,httpOptions和post应该如下所示

我现在要站在羞耻的服务器室里

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  }),
  withCredentials: true,
};

save(myData): Observable<any> {
    return this.http.post(
      this.workSpaceReportURL + 'save',
      {
        myData,
      },
      httpOptions
    );
  }
const httpOptions={
标题:新的HttpHeaders({
“内容类型”:“应用程序/json”
}),
事实上,
};
保存(myData):可观察{
返回this.http.post(
this.workSpaceReportURL+“保存”,
{
我的数据,
},
httpOptions
);
}

Hi TK,感谢您的回复。如果我将其剥离回app.use(cors()),我会得到“当请求的凭据模式为“include”时,响应中的“访问控制允许来源”头的值不能是通配符“*”。作为最低限度,我需要原产地证书。我相信这意味着你不能因为安全问题。请尝试使用您使用的协议+域+端口,看起来是这样的。这应该行得通<代码>应用程序使用(cors({origin:'http://localhost:4200' }));谢谢,我只是尝试了一下(这也意味着在我的服务调用中使用“withCredentials:true”,但实际上它完全破坏了身份验证。嗨,TK,谢谢你的回复。如果我将其剥离回app.use(cors()),我会得到“当请求的凭据模式为“包括”时,响应中的“访问控制允许来源”标头的值不得为通配符“*”“。由于凭据,我至少需要origin。我相信这意味着由于安全问题,您不能这样做。请尝试使用您使用的协议+域+端口,看起来是这样的。这应该可以工作。
app.use(cors({origin:'http://localhost:4200“}”);
谢谢,我只是试了一下(这也意味着在我的服务调用中使用“withCredentials:true”,但实际上它完全破坏了身份验证。