Question

我的 angular 应用程序在 subdomain.maindomain.com 上运行我的 api 在 api.maindomain.com 上运行

我的 nodejs 和 angular 都托管在同一个子域中。

我有一个看起来像这样的 proxy.conf.json 文件：

   {
    "/api": {
        "target": "api.maindomain.com/api/",
        "secure": false
    }
}

我的启动脚本是：

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

每当我构建和部署我的应用程序时，我都可以通过浏览器或 Postman 访问：api.maindomain.com/api/users 并且它 100% 工作。它为我提供了所需的 API 响应。

然而，当我尝试在 subdomain.maindomain.com 上对 angular 进行 API 调用时，api 调用转到 subdomain.maindomain.com/api/users 什么时候应该打电话 api.subdomain.com/api/users

我该如何解决这个问题？

Answer 1

您的代理设置仅用于开发目的。实施它是为了使开发人员更容易处理托管在另一个域（不同主机或完全另一个域）中的后端。为此，它不会随生产部署一起提供。

api.maindomain.com 实际上是其他主机，与 subdomain.maindomain.com 不同，因此请求将失败。

origin 标头对此负责。它由浏览器为每个请求自动添加，并等于您正在访问的域。

当尝试通过浏览器访问 API 时，它将始终有效。直接访问 API 时，浏览器将添加具有相同域的 origin 标头（当您从同一域访问它时），因此不会出现问题。对于 Postman，发送时没有源头，因此它也不会失败。

要解决此问题，您要么需要将它们都托管在同一主机上，要么必须为您的子域启用 CORS。如果您使用的是 Express，则可以使用类似于以下内容的 CORS middleware：

var corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only example.com.'})
})

您可以在此处找到有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

在同一个域上托管 angular 和 nodejs (cpanel)

1 个答案: