Thinkphp5和Vue前后端分离的情况下共享验证码session

写代码的猫叔

发布于：Oct 26, 2021

次浏览

1、首先在Thinkphp5的应用配置文件application/config.php下修改cookie配置项，让二级域名共享cookie

这个域名必须是主域名下的二级域名

//在cookie选项加入domain，配置域名
'cookie' => [
    // cookie 有效域名
    'domain'    => 'api.example.com',
],

2、服务器端响应头配置

将响应头设置成Access-Control-Allow-Origin：域名
响应头设置Access-Control-Allow-Credentials:true，表示跨域时，允许cookie添加到请求中。
注：设置Access-Control-Allow-Credentials:true后，要将Access-Control-Allow-Origin指定到具体的域，否则cookie不会带到客户端。

header('Access-Control-Allow-Origin:http://api.example.com');//允许单个域名
header('Access-Control-Allow-Credentials: true');//支持cookie跨域

3、Vue中axios请求配置

在main.js中配置axios

axios.defaults.withCredentials = true;//让ajax携带cookie

如果不在这个里面的话，可以搜索其他文件 axios.create ，一般是创建的时候配置，例如vue-element-admin里面是在这个文件：src/utils/request.js

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

juqery中这样写：

$.ajax({
  type: "post",
  url: "http://xxx/login.html",
  xhrFields: {
    withCredentials: true
  },
  crossDomain: true,
  data: {

  },
  dataType: "json",
  success: function (response) {
    console.log('response: ', response);
    
  }
});

4.修改vue文件的host，让域名可以正常访问

修改devServer或dev的配置(vue.config.js文件)：

port:9528,
host:'api.example.com',

更新于：Dec 13, 2021

thinkphp