我一直使用快速和前端使用角度构建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?
但这也行不通。任何形式的帮助都会很棒。
答案 0 :(得分:0)
我不认为,问题完全在于您的nginx配置。错误消息表明来自浏览器和nginx服务器的初始连接已超过https。然后你试图通过XMLHttpRequest与http建立一个不安全的连接。
解决方案:
帮助配置文件
# 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/;
}
确保节点和客户端应用程序的端口不同