docker nginx解决跨域请求的处理(https的也支持)

技术栈

docker nginx node

步骤

1） 前端页面 testCos/index.html
用于在 www.aaa.com 域名下访问 /remote/api/test，测试 Nginx 代理跨域。

2. Nginx 配置 testCros/nginx.conf
   实现 www.aaa.com 下 /remote/xxx 代理到 www.bbb.com 的同路径 /xxx，并去掉 /remote 前缀。

nginx.conf的配置如下：

server {listen 80;server_name www.aaa.com;location /remote/ {# proxy_pass http://www.bbb.com:4000/;# 在docker中使用宿主机的ip# proxy_pass http://192.168.xxx.xxx:4000/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;# 去掉 /remote 前缀rewrite ^/remote/(.*)$ /$1 break;}location / {root   /usr/share/nginx/html;index  index.html;}
}

3）被代理后端服务 testCros/server_bbb.js
用于模拟 www.bbb.com 的接口资源。

const express = require('express');
const app = express();app.get('/api/test', (req, res) => {res.send('Hello from www.bbb.com!');
});const PORT = 5000; // 你可以用 80 或其他端口，Nginx 配置里要对应
app.listen(PORT, () => {console.log(`www.bbb.com mock server running on port ${PORT}`);
});

使用说明

1）启动 server_bbb.js，监听 4000 端口。

node server_bbb.js

2）配置本地 hosts 文件，将 www.aaa.com 和 www.bbb.com 都指向 127.0.0.1。

127.0.0.1  www.aaa.com www.bbb.com

3）启动 Nginx，加载 nginx.conf (下面的 docker run的形式处理)。
4）用浏览器访问 http://www.aaa.com/index.html，点击按钮测试 /remote/api/test，会被 Nginx 代理到 www.bbb.com:4000/api/test，实现跨域资源访问。

docker nginx安装

docker run --name nginx-cros-test -d \-p 80:80 \-v $(pwd)/testCros/nginx.conf:/etc/nginx/conf.d/default.conf:ro \-v $(pwd)/testCros:/usr/share/nginx/html:ro \nginx:latest

没有存在 nginx:lastest镜像的话，可以配置 国内的 docker hub的加速器，或者直接科学上网进行

docker pull nginx:lastest

最终效果

要转发到的是 https地址时处理：

要设置

 proxy_set_header Host www.bbb.com;proxy_set_header Referer https://www.bbb.com/;

其他，比如也可以设置本地网站是 https的：

1. 生成自签名证书
   在你的 testCros 的上级目录下运行：

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \-keyout testCros/ssl.key \-out testCros/ssl.crt \-subj "/C=CN/ST=Test/L=Test/O=Test/OU=Test/CN=www.aaa.com"

会生成 ssl.key 和 ssl.crt 两个文件。

2. 修改 nginx.conf，增加 HTTPS 配置
   在 testCros/nginx.conf 里添加一个 server 块，监听 443 端口：

server {listen 443 ssl;server_name www.aaa.com;ssl_certificate     /etc/nginx/ssl/ssl.crt;ssl_certificate_key /etc/nginx/ssl/ssl.key;location /remote/ {proxy_pass http://host.docker.internal:4000/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;rewrite ^/remote/(.*)$ /$1 break;}location / {root   /usr/share/nginx/html;index  index.html;}
}

3. 挂载证书到 Nginx 容器
   启动 Nginx 容器时，增加证书挂载：

docker run --name nginx-cros-test -d \-p 80:80 -p 443:443 \-v $(pwd)/testCros/nginx.conf:/etc/nginx/conf.d/default.conf:ro \-v $(pwd)/testCros:/usr/share/nginx/html:ro \-v $(pwd)/testCros/ssl.crt:/etc/nginx/ssl/ssl.crt:ro \-v $(pwd)/testCros/ssl.key:/etc/nginx/ssl/ssl.key:ro \nginx:latest

提示:
自签名证书仅用于开发测试，生产环境请用正规 CA 证书。
如果浏览器强制拦截，可以手动信任该证书。

其他知识点

• docker命令

# 重启docker nginx
docker restart nginx-cros-test# 查看 docker nginx日志
docker logs nginx-cros-test# 查看容器状态
docker ps -a

• 来源和目的网址都是 https，也可以被代理，配置还是上边的
• 使用 docker destop的配置