带有节点 API 的 Angular 应用程序的 Nginx 设置

Question

我一直在使用 express 构建 API，并使用 angular 构建前端。两者都位于名为/var/www/apps/client 和/var/www/apps/server 的不同目录中。

我想使用 nginx 作为网络服务器来部署我的应用程序。我能够托管 Angular 应用程序，但是当我尝试请求我的 API 在浏览器上出现以下错误时。

Mixed Content: The page at 'https://xxx.xxx.xxx.xxx/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxx.xxx.xxx.xxx:3000/api/videos'. This request has been blocked; the content must be served over HTTPS.

Nginx 配置

server { 
  listen  80;
  server_name localhost;
  access_log /var/log/client/access.log;
  error_log  /var/log/client/error.log;
  root /var/www/apps/client/dist;
  charset utf-8;

   location / {
    rewrite ^ https://$host$request_uri? permanent;
   }
 }
server {
  listen        443 ssl;
  server_name  localhost;
  access_log /var/log/client/access.log;
  error_log  /var/log/client/error.log;
  ssl_certificate       /etc/nginx/ssl/nginx.crt;
  ssl_certificate_key   /etc/nginx/ssl/nginx.key;

  keepalive_timeout 5;
  root /var/www/apps/client/dist;
  charset utf-8;

  location ~ ^/(scripts.*js|styles|images) {
    gzip_static on;
    expires 1y;
    add_header Cache-Control public;
    add_header ETag "";

    break;
  }

  location / {
    try_files $uri /index.html;
  }
}

我的快递服务器代码 -

var express = require("express"),
  app = express(),
  mongoose = require("mongoose"),
  config = require("./config");

app.set("appPath", config.root);

mongoose.connect(config.mongo.uri, config.mongo.options);

app.use(function (req, res, next) {
  "use strict";

  // Website you wish to allow to connect
  res.setHeader("Access-Control-Allow-Origin", "*");
  // Request methods you wish to allow
  res.setHeader("Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE");

  // Request headers you wish to allow
  res.setHeader("Access-Control-Allow-Headers",
    "X-Requested-With,content-type,api_key,adminid,userid");

  // Set to true if you need the website to include cookies in the    requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader("Access-Control-Allow-Credentials", true);

  // Pass to next layer of middleware
  next();
});

app.use(function (req, res, next) {
  "use strict";

  next();
});


require("./routes")(app);
app.listen(config.port);

console.log("Listening on port " + config.port)

在3000 端口提供 API。我找到了这个If possible use nginx to redirect by location to node app?
但这也行不通。任何形式的帮助都会很棒。

Answer 1

我不认为，问题完全在于您的 nginx 配置。该错误消息暗示来自浏览器和 nginx 服务器的初始连接是通过 https 进行的。然后你试图通过 XMLHttpRequest 和 http 建立一个不安全的连接。

解决方案：

1. 将初始连接加载为不安全即 http
2. 或者使用安全连接（即 https）创建您的 XMLHttpRequest。

帮助配置文件

# For http
server {
  listen 80
  server_name localhost
  access_log /var/log/client/access.log
  error_log /var/log/client/error.log
  root /var/www/apps/client/dist
  charset utf-8

     location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_set_header X-NginX-Proxy true;

         proxy_pass http://localhost:3000/;
     }
}

# For https
server {
  listen 443 ssl
  server_name localhost
  access_log /var/log/client/access.log
  error_log /var/log/client/error.log

  ssl_certificate       /etc/nginx/ssl/nginx.crt;
  ssl_certificate_key   /etc/nginx/ssl/nginx.key;
  root /var/www/apps/client/dist
  charset utf-8

     location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_set_header X-NginX-Proxy true;

         proxy_pass http://localhost:3000/;
     }
}

重启 Nginx

sudo /etc/init.d/nginx restart

Answer 2

问题是您在内部访问的另一个端点不受 Https 保护，因此您会收到错误

http://xxx.xxx.xxx.xxx:3000/api/videos

因此，您应该为客户端编写单独的配置以确保连接 https 安全。添加该代理通行证也可以将您的所有请求重定向到端口 443 到 3000，类似于您对服务器所做的操作

location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_set_header X-NginX-Proxy true;

         proxy_pass http://localhost:3000/;
     }

确保节点和客户端应用程序的端口不同