解决域名的跨域问题

问题描述：

当我们的项目上线后，使用IP地址可以正常对网页进行访问和登录，所有功能正常。

那么问题来了，给网站备案好之后，网站主页能够正常访问，但是登录时，发现返回的session被释放掉了

并且ip访问时cookie里有维持session，而域名访问时却没有，在尝试试了很多种方法，包括在后端设置cookieSerializer，都无法解决

image-20241231143619864

image-20241231141810561

image-20241231142500103

解决思路：

经过查阅资料之后，终于发现了问题所在：

  1. 前端现在是域名+端口
  2. 但是调用后端是ip+端口
  3. 违背同源策略了

跨域问题的原因 跨域问题是由浏览器的 同源策略（Same-Origin Policy) 引起的。同源策略要求： 协议、域名、端口都必须一致。 如果前端和后端运行在不同的域名、IP 或端口上，例如： 前端地址为 http://126.4.3.3 后端地址为 http://126.4.3.3:8080 浏览器会认为它们是不同源，因此会阻止请求，这是跨域问题的本质。

解决方法：

在我们前端的转发路径中将原本的IP改为我们的子域名

image-20241231143657068

通过 Nginx 的反向代理机制，将前端通过 /api 路径发起的请求转发到后端（即 http://127.0.0.1:后端端口 ）。 对于前端来说，请求的域名和端口仍然是 http://126.4.3.3 ，从浏览器的角度看，请求是同源的。具体操作如下：

在Nginx的配置文件中，server块进行如下设置，其中需要修改的有

  • listen：改为自己的网页实际端口
  • server_name：改为自己的网页域名/子域名
  • root：改为自己前端的dist文件夹所在路径
  • proxy_pass：改为自己调用服务器后端API的IP+端口

image-20241231144518770

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server
    {
        listen 80;
        server_name xxx;
        
        location / {
            root /xx/xx/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /api{
            proxy_pass http://xx:xx;
        }
    }

success！

image-20241231144201783

image-20241231144239988