express - webpack-dev-server 和 express 在同一个端口上？

Question

我在开发环境中遇到跨域问题，webpack-dev-server 在端口 8080 上运行，而 express 后端在端口 5000 上运行。

通过 AJAX 调用后端 api 方法引发 CORS 错误

单击指向后端 api 的链接不会传递 session 数据

这些问题是可以解决的，但我想知道如果它们不会在生产中发生(客户端和后端将使用相同的端口)

这个问题可以解决吗(例如，通过在同一端口上运行 dev server 和 express 或以任何其他方式？)

Answer 1

这对我有用:
https://medium.com/@spencerfeng/setup-a-proxy-for-api-calls-for-your-angular-cli-app-6566c02a8

我觉得大多数人都没有弹出他们的 webpack 配置......如果你不知道这意味着什么，那么你可能没有弹出你的 webpack 配置，所以查看“未弹出”选项的选项。

我会注意到，如果您使用的是 ng serve而不是 npm start您要么需要切换到 npm start或者输入完整的命令 ng serve --proxy-config proxy.conf.json为了使这个工作。

另外在您的 proxy.conf.json 中:

示例仅显示“/api”

但是如果您有任何其他不以/api 开头的端点，您也需要添加它们。以防万一您没有意识到 '/api' 是一个路径识别字符串，而不仅仅是一个“设置”。

示例 proxy.conf.json:

{
     "/api": { 
       "target": "http://localhost:3001",
       "secure": false
     },
     "/oauth": {
       "target": "http://localhost:3001",
       "secure": false
     },
     "/foo": {
       "target": "http://localhost:3002",
       "secure": false
     }
}