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头