Question

我有一个用户填写的联系表单，该表单将发布到我的Web API，使用nodemailer发送。

当我在本地运行客户端和API时，CORS按预期工作：

客户端

本地主机：4200 使用POST请求

sendEmail(queryObject: any) {
const body = JSON.stringify(queryObject);
const headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:3000/api/sendemail', body, {headers: headers})
  .map((response: Response) => response.json());
}

API

本地主机：3000

但是一旦我将API部署到heroku并将客户端中的POST URL更改为指向Heroku，我就会收到预检错误：

选项https://keilcarpenter-portfolioapi.herokuapp.com/api/sendemail 503（服务不可用）

XMLHttpRequest无法加载https://keilcarpenter-portfolioapi.herokuapp.com/api/sendemail。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:4200＆＃39;因此不允许访问。响应的HTTP状态代码为503。

我确信我在我的API上的server.js中正确设置了CORS：

    app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

为什么CORS在本地接受POST但不在Heroku上接受？

Answer 1

好的，当您部署Web应用程序或从其他端口部署应用程序时，将使您处理CORS，因此您需要将服务器配置为更加友好并接受CORS（使您接受要求表格的来源不同）。在tomcat中修改web.xml，firebase做另一件事，在相同的天蓝色等...每一个服务器都有自己的配置。但是在angular中，您必须配置一个代理来绕过这些端口问题。因此，像这样创建proxy.conf.json

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

，然后在package.json中创建如下脚本：

"scripts": {
        "start": "ng serve --proxy-config proxy.conf.json",

然后运行ng serve运行ng start或npm start

关于此的真不错的文档：

https://github.com/angular/angular-cli/pull/1896/commits/a81aa3b6117848a1c9c99d3b6d0666433b5144e0

CORS无法正常工作

1 个答案: