docker nginx解决跨域请求的处理(https的也支持)
文章目录
- 技术栈
- 步骤
- 使用说明
- docker nginx安装
- 最终效果
- 要转发到的是 https地址时处理：
- 其他知识点
技术栈
docker nginx node
步骤
1） 前端页面 testCos/index.html
用于在 www.aaa.com 域名下访问 /remote/api/test，测试 Nginx 代理跨域。
- 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的：
- 生成自签名证书
在你的 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 两个文件。
- 修改 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;}
}
- 挂载证书到 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的配置