如何在 nginx 上设置反向代理以避免我的 ionic 和 meanjs 应用程序的 CORS 问题。答案

【问题标题】：How do I setup reverse proxy on nginx to avoid the CORS issue for my ionic and meanjs application.如何在 nginx 上设置反向代理以避免我的 ionic 和 meanjs 应用程序的 CORS 问题。
【发布时间】：2017-04-07 21:51:03
【问题描述】：

所以我有 2 个应用程序在同一台服务器上运行。 1. 在后端，我有 Mean.js，它提供执行 CRUD 操作的服务。 2. 在前端，我使用的是提供 UI 体验的 IONIC 应用程序。

前端（Ionic 应用程序）在 81 上运行，后端在 3000 上运行。

我尝试通过在线查找为后端（节点/平均值）设置反向代理，但没有成功。

这是我的 nginx 设置

server {
    listen 80;

    server_name meantodo.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

【问题讨论】：

标签： angularjs ionic-framework cors meanjs

【解决方案1】：

只需将标头添加到您的快速应用程序中，允许离子服务器 ip 和端口如下所示：

app.use(function(req, res, next) {
     res.header('Access-Control-Allow-Origin', 'http://yourIonicServerIp:port');
     res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
      next();
  });

【讨论】：

我在平均应用程序中的哪个位置执行此操作？ github.com/meanjs/mean config/lib/express.js 在第 50 行。我会告诉你它是否有效。
我认为它可以工作，但让我也检查一下其他类似的 api...谢谢 FRECIA
希望如此，如果您遇到任何错误，请告诉我，祝您编码愉快！
我可以为超过 1 个 url 做吗，例如，app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin); res.header ('Access-Control-Allow-Origin', '234.34.23.112:81'); res.header('Access-Control-Allow-Origin', '234.234.34.34.112:81'); next(); });
READ 操作工作正常，但更新时我仍然遇到问题：预检响应具有无效的 HTTP 状态代码 403 @FRECIA

【解决方案2】：

通过在https://github.com/meanjs/mean/blob/master/config/lib/express.js#L57 上添加以下行来解决它

var corsOptions = {
    origin: 'http://34.192.250.412:80',
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
  };
  app.use(cors());

【讨论】：

【解决方案3】：

我对 Ionic 和 mean.js 一无所知，但听起来你遇到了和我一样的情况，React 设置了 2 个站点，其中一个使用 POST 或 GET 调用另一个站点.

所以，首先，您说您的前端站点在端口 81 上，但它说它无法在错误中加载 http://34.192.250.112/api/properties。这是一个 80 端口调用。你说你的服务查询的后端在 3000 上，那么你确定你的操作实际上不在那个 3000 的网站上吗？您需要在112 之后添加:81 或:3000，如果那是在某些“GET”中您没有共享的话。或者可能是因为 listen 80 而这样做，所以你必须用 listen 81 或 listen 3000 替换它，这适用于你的 api 真正所在的位置。

但是假设您在调用中修复了该问题，然后又遇到了类似的错误，那么您需要再次访问 Web 服务器上的 IIS，假设它托管在那里（如果不在 IIS 中，我确定有Tomcat 中的一个等效位置，或者我将要告诉你去的任何地方）。在您尝试调用的站点上，打开 HTTP 响应标头 功能。添加：

Name:  Access-Control-Allow-Origin
Value  http://34.192.250.112:81

如果您的请求需要身份验证，您可能需要添加：

Name:  Access-Control-Allow-Credentials
Value  true

此外，如果这还不够，并且您仍然遇到错误，您可以在禁用安全性的情况下启动 Chrome，然后导航到您的站点并执行导致“GET”的操作。在命令提示符下，您可以：

cd C:\Program Files (x86)\Google\Chrome\Application
chrome --disable-web-security --user-data-dir=C:/somefolder

然后导航到您的网站。

【讨论】：