vue 和 tp5之间的跨域传输token问题

最新推荐文章于 2024-09-18 15:24:16 发布

小阿巳

最新推荐文章于 2024-09-18 15:24:16 发布

阅读量600

点赞数

分类专栏： thinkphp 文章标签： thinkphp vue token

本文链接：https://blog.youkuaiyun.com/weixin_46044420/article/details/118156985

版权

本文探讨了在Vue和ThinkPHP5（TP5）之间处理跨域传输token的问题，强调了防止请求重复提交的重要性。在Vue前端，通过axios请求获取并存储token，并配置请求头以携带cookie。在TP5后端，设置了跨域请求响应。测试结果显示功能正常，重点在于正确处理跨域请求时携带cookie。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 和 tp5之间的跨域传输token问题

前言:
1.为什么使用token?
防止请求重复提交
2.vue 使用token交互时，token总验证失败? 为空？
thinkphp 的表单令牌token 在vue 前后端分离开发情景下，
由于浏览器同源策略下出现跨域，但是我们都知道怎么处理一般情况下的跨域请求但是token这块如果缺少配置会出现问题。

屁话不多说开始上代码:(本文所有代码均在文章结尾处链接下载)

一.前端:(vue)

我们在页面渲染前与后端服务器请求token 存入cookie

<script>
export default {
   
...
  created:function(){
   
	    this.$post(
				this.GLOBAL.host+'fileup/index/gettoken')
				 .then((response) => {
   
				 	 this.$util.cookies.set('token', response.token)
				   })
  },
  </script>

此处利用axios工具进行请求
设置跨域请求参数，请求拦截器，响应拦截器

import axios from 'axios';
import qs from 'qs';
import util from './util.js';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
axios.defaults.withCredentials=true; /

//http request 拦截器
axios.interceptors.request.use(
  config => {
   
	let token = util.cookies.get('token')
	
	config.data = qs.stringify(config.data)
	
    config.headers = {
   
      'Content-Type':'application/x-www-form-urlencoded',
	  'token':token
    }
    return config;
  },
  error => {
   
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
   
    if(response.data.errCode ==2