vue 中设置了instance.defaults.withCredentials = true; 无法请求后端问题解决

个人理解

# post携带cookie需要前后端配合 然而 post请求会优先发送一个预检(检查请求是否安全)。

我们大部分会在请求拦截是否是登录状态 这就导致乌龙出现了 由于预检的时候不会携带cookie会被后端直接拦截而无法成功预检所以只需要加上以下代码就可以解决(我的预检用的都是OPTIONS方法 具体为什么你们可以自己了解 。。。)

前面说了cookie需要前后的配合 如果后端不设置请求头也是不行的

这样应该就可以解决你的问题了

//定制请求的实例 //导入axios npm install axios import axios from 'axios'; import { ElMessage } from 'element-plus' //定义一个变量,记录公共的前缀 , baseURL //const baseURL = 'http://localhost:8080'; const baseURL = '/api'; const instance = axios.create({ baseURL }) import {useTokenStore} from '@/stores/token.js' //添加请求拦截器 instance.interceptors.request.use( (config)=>{ //请求前的回调 //添加token const tokenStore = useTokenStore(); //判断有没有token if(tokenStore.token){ config.headers.Authorization = tokenStore.token } return config; }, (err)=>{ //请求错误的回调 Promise.reject(err) } ) /* import {useRouter} from 'vue-router' const router = useRouter(); */ import router from '@/router' //添加响应拦截器 instance.interceptors.response.use( result => { //判断业务状态码 if(result.data.code===200){ return result.data; } //操作失败 //alert(result.data.msg?result.data.msg:'服务异常') ElMessage.error(result.data.msg?result.data.msg:'服务异常') //异步操作的状态转换为失败 return Promise.reject(result.data) }, err => { //判断响应状态码,如果为401,则证明未登录,提示请登录,并跳转到登录页面 if(err.response.status===402){ ElMessage.error('请先登录') router.push('/login') }else{ ElMessage.error('服务异常') } return Promise.reject(err);//异步的状态转化成失败的状态 } ) export default instance;前端部署 配置生产和开发环境 在项目打包之前,先配置myAxios.ts文件(这个文件就是你自定义axios的文件,并且在里面区分开发环境和生产环境)的线上环境和生产环境。(注意生产环境的url后面要加上后端端口号,但有又不要加,视情况而定。) import axios from 'axios'; const isDev = process.env.NODE_ENV === 'development'; const myAxios = axios.create({ baseURL: isDev ? 'http://localhost:8080/api' : 'http://你的服务器IP地址或者域名/api', }) myAxios.defaults.withCredentials = true; //设置true // Add a request interceptor myAxios.interceptors.request.use(function (config) { console.log('我要发请求啦') return config; }, function (error) { return Promise.reject(error); }); myAxios.interceptors.response.use(function (response) { console.log('我收到你的响应啦') // 未登录则跳转登录页 if (response?.data?.code === 40100) { const redirectUrl = window.location.href; window.location.href = `/user/login?=redirect=${redirectUrl}`; } return response.data; }, function (error) { // Do something with response error return Promise.reject(error); }); export default myAxios; 前端项目打包 在宝塔部署前端项目之前,先将前端项目打包好。在package.json文件中执行buid命令。 打包后会多出一个dist目录,点击右键打开于终端,在终端中执行serve命令,判断打包好的项目是否能够运行成功。(注意一定要切换至dist目录下执行serve命令,不然点击链接显示不出来项目) 点击Local后面的地址,看看项目打包是否有问题。 如果是这样子的话就没啥问题。(我这个显示了当前登录用户“ikun”,是因为我已经上线了,你们是不会显示的) 分析一下,给出详细的步骤我需要知道哪个文件在哪个位置需要修改什么都指出来
最新发布
03-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值