在同一台服务器上运行Node Express server和Angular App时出现问题

我正在将我的第一个angular应用程序部署到生产环境中，但我无法让我的NGINX服务器在Express上运行我的端点

我的设置（都在同一个EC2实例上运行）：

node express服务器已成功通过API的端口3000运行（我可以通过浏览器访问端点）

NGINX服务器通过端口81成功托管我的Angular应用程序

在angular应用程序中，我使用environments.prod.ts文件声明http请求的服务器URL

export const environment = {
  production: true,
  serverUrl: 'localhost:3000'
};

这就是我相当确定我的问题所在的地方。我的服务器URL应该是什么

这是我尝试通过应用程序生成http req时遇到的特定错误：

编辑： 我修复了我的环境文件，使其包含“http://”，但现在出现了此错误。老实说，我不是100%确定CORS是如何工作的。我对这一切都很陌生

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/openapp/2019-12-01. (Reason: CORS request did not succeed).

---

您可能缺少Cors配置。 以下是在生产环境中工作的我的=>

import cors from 'cors';
const options: cors.CorsOptions = corsOptions: {
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'X-Access-Token'],
  credentials: 'true',
  methods: ['GET', 'HEAD', 'OPTIONS', 'PUT', 'PATCH', 'POST', 'DELETE'],
  origin: '*',
  preflightContinue: true,
  optionsSuccessStatus: 204
},

在选项请求时将其用于路由器：

router.options('*', cors(options))

请注意原点“*”。如果你不想让你的api通过ajax向整个web开放，一定要把你的域名放在那里

还有一件事，如果我可以建议的话，您不必公开3000端口，只需在端口80上通过nginx，这样您就可以将您的api baseUrl列为/api，仅此而已

这就是我个人的做法=> 对于nginx部件，以下是Express配置：

upstream node_upstream {
        server      127.0.0.1:3000;
        keepalive   64;
}

...
server {
    location /api {
        ...

        client_max_body_size        3M;
        client_body_buffer_size     1M;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Host $host;
        proxy_set_header        X-NginX-Proxy true;
        proxy_http_version      1.1;
        proxy_set_header        Upgrade $http_upgrade;
        proxy_set_header        Connection "upgrade";
        proxy_max_temp_file_size    0;
        proxy_pass              http://node_upstream;
        proxy_cache_bypass      $http_upgrade;
        proxy_connect_timeout   120;
        proxy_read_timeout      120;
        proxy_send_timeout      120;
        proxy_redirect          off;
    }

}

---

您可能缺少Cors配置。 以下是在生产环境中工作的我的=>

import cors from 'cors';
const options: cors.CorsOptions = corsOptions: {
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'X-Access-Token'],
  credentials: 'true',
  methods: ['GET', 'HEAD', 'OPTIONS', 'PUT', 'PATCH', 'POST', 'DELETE'],
  origin: '*',
  preflightContinue: true,
  optionsSuccessStatus: 204
},

在选项请求时将其用于路由器：

router.options('*', cors(options))

请注意原点“*”。如果你不想让你的api通过ajax向整个web开放，一定要把你的域名放在那里

还有一件事，如果我可以建议的话，您不必公开3000端口，只需在端口80上通过nginx，这样您就可以将您的api baseUrl列为/api，仅此而已

这就是我个人的做法=> 对于nginx部件，以下是Express配置：

upstream node_upstream {
        server      127.0.0.1:3000;
        keepalive   64;
}

...
server {
    location /api {
        ...

        client_max_body_size        3M;
        client_body_buffer_size     1M;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Host $host;
        proxy_set_header        X-NginX-Proxy true;
        proxy_http_version      1.1;
        proxy_set_header        Upgrade $http_upgrade;
        proxy_set_header        Connection "upgrade";
        proxy_max_temp_file_size    0;
        proxy_pass              http://node_upstream;
        proxy_cache_bypass      $http_upgrade;
        proxy_connect_timeout   120;
        proxy_read_timeout      120;
        proxy_send_timeout      120;
        proxy_redirect          off;
    }

}