dcoker+nginx解决前端本地开发跨域

步骤

1. docker 拉取nginx镜像
2. 跑容器 并配置数据卷nginx.conf

nginx.conf文件配置

这里展示server

server {listen       80;listen  [::]:80;server_name  localhost;#access_log  /var/log/nginx/host.access.log  main;location / {# 当我们访问127.0.0.1:8028就会跳转到http://127.0.0.1:5173;proxy_pass  http://xxxxx:5173/；proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host; # $host是nginx内置变量，表示客户端请求的主机名。proxy_set_header X-Real-IP $remote_addr;# $remote_addr是nginx内置变量，表示客户端的IP地址。# 这条指令将会将请求的X-Forwarded-For字段设置为客户端的IP地址，并$proxy_add_x_forwarded_for是nginx内置变量，表示代理服务器的IP地址。proxy_set_header X-Forwarder-For $proxy_add_x_forwarded_for;}location /api {# 请求交给名为api_serve的upstream上# proxy_pass http://api_serve;# rewrite ^/api/(.*)$ /$1 break;proxy_pass  http://这里的ip地址填宿主机的IP:8329;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarder-For $proxy_add_x_forwarded_for;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}
}

宿主机IP地址获取

前端项目的公网地址

把Netword地址挑一个上面location /的proxy_pass的地址中即可

cmd 输出ipconfig 将下面的地址复制到nginx中

为什么不能直接配置127.0.0.1，如果nginx配置了这个，访问的是容器内的127.0.0.1而不是宿主机的。

提示

真实项目中后端服务肯定在服务器上，而自己开发的项目才需要在容器nginx内配置宿主机的IP地址。

方式二Vite和Webpack开发服务器

（vite/webpack开发服务器） 这个比较简单看文档即可，有需要演示的可以评论留言。

方式三BFF层

前端搭建BFF层，将路径做替换即可，这个在我nginx文章里有讲解参考地址。

方式四JSONP

限制太多
1、不能接受http状态码
2、只能支持get请求
3、不能发送和接受http头