Nginx使用节点API设置角度应用程序

时间:2016-08-30 08:22:50

标签: angularjs node.js express nginx

我一直使用快速和前端使用角度构建API。两者都位于名为/var/www/apps/client/var/www/apps/server的不同目录中。

我想使用nginx作为网络服务器部署我的应用程序。我能够托管角度应用程序,但在尝试请求我的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? 但这也行不通。任何形式的帮助都会很棒。

2 个答案:

答案 0 :(得分:0)

我不认为,问题完全在于您的nginx配置。错误消息表明来自浏览器和nginx服务器的初始连接已超过https。然后你试图通过XMLHttpRequest与http建立一个不安全的连接。

解决方案:

  1. 将初始连接加载为不安全,即http
  2. 或者使用安全连接(即https。
  3. )创建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
    

答案 1 :(得分:0)

问题是你在内部遇到的另一个端点不受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/;
     }

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