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

Question

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

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

我尝试通过在线查找为后端（node/mean）设置反向代理但没有成功。

这是我的 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;
    }
}

Answer 1

只需将 header 添加到您的 express 应用程序中，允许 ionic 服务器 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();
  });

Answer 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());

Answer 3

我对 Ionic 和 mean.js 一无所知，但听起来你运行正在做和我一样的事情，React set-up 为 2网站，其中一个人用 POST 或 GET 调用另一个人。

所以，首先，您说您的 front-end 站点在端口 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 响应 Headers 功能。添加：

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

然后导航到您的站点。

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

How do I setup reverse proxy on nginx to avoid the CORS issue for my ionic and meanjs application.

angularjs

ionic-framework

cors

meanjs