nginx 反向代理 Angular Node app 混合內容 http 請求

Question

我正在處理 nginx 和 node express 服務器，該應用程序過去在端口 80 上與反向代理一起工作正常，但是當我在 nginx 上安裝帶有 certbot 的 SSL 時，問題就開始了，我也一直在嘗試使用 https 節點模塊，但我'當我從我的 angular 前端向我的節點后端發出請求時，我仍然遇到混合內容錯誤。 我認為這是一個糟糕的流量配置超過 nginx，也許我需要使用 http 設置從 nginx 到節點服務器（端口 3000）的流量，但我不確定如何實現。 提前致謝。

請求時控制台錯誤：

polyfills-es2015.aa82454585d558e1759e.js:1 混合內容：“https://www.example.com/signup”的頁面已通過 HTTPS 加載，但請求了一個不安全的 XMLHttpRequest 端點“http://myVpsIpNumber:3000/api/”登記'。 此請求已被阻止； 內容必須通過 HTTPS 提供。

這是我的 nginx 集：

server {

   server_name example.com www.example.com;

    location / {
    proxy_pass http://localhost: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;
  }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    server_name example.com www.example.com;
    return 404; # managed by Certbot

}

我的快遞服務器：

const express = require('express');
const cors = require('cors');

let app = express();

//routes
const user_routes = require('./routes/user.router');

// middlewares
app.use(cors());

app.use(('/'), express.static('client', {redirect: false}));
app.use('/api', user_routes);

app.get('*', function(req, res, next){
    res.sendFile(path.resolve('client/index.html'));
})


// start server
app.listen(3000, () => console.log('Server started at port : 3000'));

Angular服務：

 import { HttpClient, HttpHeaders } from '@angular/common/http'; noAuthHeader = { headers: new HttpHeaders({ 'NoAuth': 'True' }) }; constructor(private http: HttpClient) {} postUser(user: User){ return this.http.post('http://localhost:3000/api' + '/register', user, this.noAuthHeader); }

節點后端：

 register: (req, res, next) => { let user = new User(); user.email = req.body.email; user.password = req.body.password; user.save((err, doc) => { if (.err) res;send(doc). else { if (err.code == 11000) res.status(422);send(['Email ya registrado']); else return next(err); } }); }

Answer 1

我有同樣的問題，雖然不是 Angular 而是 Vuejs。 使用 http 一切正常，但在使用 certbot 安裝 SSL 證書后，出現“混合內容”錯誤。 我是初學者，不知道如何讓我的前端與后端對話。 我花了很長時間來解決這個問題，所以我希望這會有所幫助：

1. 復制你的“dist”文件夾，你在這個目錄中存儲你的生產版本 /var/www/html 像這樣$ cp -r /usr/src/app/dist/* /var/www/html

2. /etc/nginx/sites-available/default 中的 Nginx 默認文件應如下所示：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }
}

server {

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;
    server_name www.example.com example.com; # managed by Certbot


    location / {
        try_files $uri $uri/ =404;
    }


location /api {
         proxy_pass http://localhost: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;
        }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80 ;
    listen [::]:80 ;
    server_name www.example.com example.com;
    return 404; # managed by Certbot
}

3. 在前端使用https://example.com/api而不是http://localhost:3000/api像這樣（不確定這在 Angular 中是否完全像這樣，但你明白了）：

postUser(user: User){
    return this.http.post('https://example.com/api' + '/register', user, this.noAuthHeader);
 }

4. app.js 文件看起來沒問題。 所以應該沒有必要改變。

Answer 2

問題出在來自前端的 API 調用中，解決方案是將 URL 替換為 SSL 域（使用 https://）。

發展：

 'http://localhost:3000'

生產：

 'https://www.example.com'

 import { HttpClient, HttpHeaders } from '@angular/common/http'; noAuthHeader = { headers: new HttpHeaders({ 'NoAuth': 'True' }) }; constructor(private http: HttpClient) {} postUser(user: User){ return this.http.post('https://www.example.com/api' + '/register', user, this.noAuthHeader); }