本地项目遇到的Cookies跨域问题

   写了个前后端分离项目，前端使用Vue3，后端使用SpringBoot。虽然都运行在本地，都可以通过localhost访问，但问题在于端口号不一样，一样会触发跨域问题。尤其是浏览器对Cookies的限制最严格，根本不能在跨域的状态下正常运行。

设置请求头

   如果不考虑Cookies的问题，普通的POST、GET等请求可以通过HttpHeader来告诉浏览器允许跨域。

response.setHeader("Access-Control-Allow-Origin", "http://localhost:5173") //填前端的网络地址
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
response.setHeader("Access-Control-Allow-Headers", "*")

   这样设置好以后就可以和后端API进行交互了，但是浏览器会忽略Set-Cookie字段，发送请求也不会携带Cookie，如果需要Cookie鉴权就不行了。

设置Cookie属性等

   网上的一个方法，说是可以允许Cookie跨域，但是我试过后，还是不行。（文章地址）

再套一层代理

   直接从源头解决，既然跨域那么麻烦，不跨域不就行了。用Nginx代理前端地址和后端地址，全部映射到本地的80端口，不仅能解决跨域问题，还不用另外去记各个服务的端口号了。

   这里给出Nginx配置：

server {
    listen 80;
    server_name localhost;
    
      # Spring-Boot后端 80
      location /api/{
      rewrite ^/api(/.*)$ $1 break;  # 删除前缀
      proxy_pass http://localhost:8090;

      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;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

    # Vue前端 80
    location /{
      proxy_pass http://localhost:5173;

      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;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }

   各位如果觉得有用请点击下方的打赏，扫描二维码给我投币，创作不易，感谢支持！