如何使用 Heroku 上托管的 Angular App 修复 CORS？答案

【问题标题】：How to fix CORS with Angular App hosted on Heroku?如何使用 Heroku 上托管的 Angular App 修复 CORS？
【发布时间】：2019-10-01 10:23:23
【问题描述】：

我已按照article (01.10.2019 12:15) 在 Heroku 上部署 Angular 应用程序，实际上在我的笔记本电脑上运行良好。

但是，在我的手机中打开请求不起作用。我正在使用 MEAN 堆栈。

后端基本上在 node express 中，它与 MongoDB 通信并处理文档。我还在 Heroku 上托管了后端，它返回了一个类似 "backend.appheroku.com" 的链接。 如果我在 PostMan 中运行它，例如发出请求，它工作正常。我请求的设备无关紧要（例如：GET backend.appheroku.com/users）。

在FrontEnd Angular App中，当然，我已经创建了一个service.ts，以便我发出GET、POST等请求……Heroku也返回了一个类似的链接”前端.appheroku.com”。这在我的笔记本电脑上运行良好，但是，在我的手机中运行该链接我无法再从前端应用程序发出请求。例如“frontend.appheroku.com/users”从“backend.appheroku.com”/users 请求“users”集合，并用 HTML 显示结果。

我只知道这是 CORS 问题，但是，我仍然没有找到解决方案。我也尝试按照https://expressjs.com/en/resources/middleware/cors.html 的步骤进行操作，但也没有成功。

Backend.js 文件：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/users', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

let port = process.env.PORT || 3050;

app.listen(port, function () {
  console.log('CORS-enabled web server listening on Heroku port')
})

提前致谢。

【问题讨论】：

您必须为您的后端启用 CORS 支持。查看文档expressjs.com/en/resources/middleware/cors.html 或搜索博客文章，解释如何使用 node express 或 MEAN。
我也试过了。 “启用所有 CORS 请求”部分。
请从您的后端添加相关代码以及您收到的问题的 cors 错误消息。
您还必须启用预检请求：expressjs.com/en/resources/middleware/…

标签： angular heroku cors mean-stack

【解决方案1】：

我必须在我的 backend.js 中添加以下代码（感谢@fridoo）：

app.options('*', cors()) // include before other routes

在 package.json 我还必须添加 "heroku-postbuild": "ng build --prod":

{
    "postinstall": "ng build --aot --prod",
    "heroku-postbuild": "ng build --prod" // add this for heroku
},

【讨论】：