CORS 不工作

Posted 2023-03-04

【中文标题】CORS 不工作

【英文标题】：CORS not working

【发布时间】：2017-08-19 17:16:21

【问题描述】：

我有一个用户填写的联系表格，该表格将发布到我的 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。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://localhost:4200'。响应的 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 上？

【问题讨论】：

Allow CORS REST request to a Express/Node.js application on Heroku的可能重复

另请注意，字符串化为 json 并添加 json 内容类型标头是不必要的。只需发布对象，Angular 就会为您完成。

【参考方案1】：

好的，当您从不同端口部署 webapp 或应用程序时，将使您处理 CORS，因此您需要将服务器配置为更友好并接受 CORS（使您接受来自不同来源的请求)。在 tomcat 中修改 web.xml，firebase 做另一件事，在 azure 上同样等等......每个服务都有自己的配置。 但是在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