Ant Design Pro学习记录—前后端分离跨域设置，解决跨域session不一致

目录

前言

一、为什么跨域

二、跨域配置

三、跨域请求session不一致

---

前言

第一次做前后端分离，也是踩了很多坑，记录一下AntDesignPro跨域解决的方式。

服务器系统使用Nginx，服务端使用thinkphp6。

AntDesignPro正式build放到服务器上后，提示登录成功，但一直登录不上，后来发现是跨域session不同导致的，登录的时候session和登录成功后session的id不同，导致提示登录成功，就是登录不进去的情况。

---

一、为什么跨域

不想知道为什么要跨域，只想知道怎么解决。

二、跨域配置

网上有很多跨域配置的解决方案，可是针对不同实际情况有的有效，有的无效，这里记录一下我的调查结果，就下面这几行代码很简单，放到nginx配置文件就行。

我的实际情况：把这几行代码放到配置文件的server内，停止后再启动nginx就是不生效，换个位置还是不行，最后干脆直接放到配置文件server外面，这就可以了，一脸懵，不知道为什么，但这样他就行了；

我原先也配置 Access-Control-Allow-Origin：*，没有写请求的具体地址，后来为了解决无法识别同一个session的问题，又给配上了具体地址。

最后发现后台框架已经封装了跨域，直接就使用封装好的跨域配置了，也就把nginx的配置去掉了，不过总体就是这几行配置。

# 允许跨域请求的“域”
add_header 'Access-Control-Allow-Origin' *;
# 允许客户端提交Cookie
add_header 'Access-Control-Allow-Credentials' 'true';
# 允许客户端的请求方法
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
# 允许客户端提交的的请求头
add_header 'Access-Control-Allow-Headers' 'Origin, x-requested-with, Content-Type, Accept, Authorization';
# 允许客户端访问的响应头
add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma';

三、跨域请求session不一致

参考thinkphp中session跨域问题怎么处理 - 编程语言 - 亿速云

跨域请求基本就是配置 withCredentials: true，服务端跨域Access-Control-Allow-Origin要配置具体地址，不能使用 *。

但前端请求的实际情况都不同，完全跨域，AntDesignPro请求跨域请求要怎么处理，对新手来说还是难，想来AntDesignPro都发展到V5版本了，这点小问题应该是有处理方式的，资料太少，废了好大劲才给试出来。

直接在API接口配置credentials:'include'就行了。

request中withCredentials的配置说明如下图，credentials要配置include才行，而credentials的值有三个，另外两个没有细究，但是注意配置好后一定要清除浏览器缓存才行

之后就可以正常登录了。

---

 总结

AntDesignPro配置很全，但资料太少，研究一点是一点。