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

最新推荐文章于 2024-12-29 13:10:48 发布
最新推荐文章于 2024-12-29 13:10:48 发布
阅读量274 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Java学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WS_IT1/article/details/144007449

个人理解

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

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

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

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

vue中使用axios 进行请求和响应拦截：数据正在处理，请勿重复提交 | 请求时携带 token、签名 | 跳转到登录页面、执行完成回调then 或失败回调 catch
专注于计算机研发知识和资讯分享
02-26 186
I axios 进行请求和响应拦截 发送请求 请求拦截器中，将 token 添加到请求头中。 设置响应拦截器 在响应拦截器中，检查响应状态码或自定义逻辑，决定是否跳转到登录页面。 II 案例 创建axios实例 request拦截器 get请求映射params参数 数据正在处理，请勿重复提交 请求时携带 token、签名 响应拦截器案例 III 知识扩展 Promise 基础 是一个表示异步操作最终完成或失败的对象。它有三种状态：
前端通用保存用户登录状态之“withCredentials“
qq_44963669的博客
12-05 1049
前端通用保存用户登录状态之"withCredentials"标题阐述如何开放使用withCredentials开放证书触发的问题及解决方式 标题阐述 在前端里面如何保存用户登录状态，即是难点也是一种非常常用的技术，通过判定用户的状态来开启部分功能或者全部功能。 常见的有： 浏览器的localStorage、sessionStorage来维持登录状态 vue 的vuex 来共享用户状态 前端开放浏览器的证书来维持用户的登录状态 这里嘛小编就第三点来进行阐述。 如何开放使用withCredentials
解决Vue和Beego项目中，Vue请求无法发送cookie，后端无法获取cookie的问题，和解决Vue的axios设置withCredentials之后跨域问题
LagerSwan的博客
12-30 3893
问题一、Vue请求无法发送cookie，后端无法获取cookie的问题； 1、今天在实现 Vue + Beego 项目的登录功能时，出现 Vue 发送请求之后，Beego 居然无法获取 cookie 的问题，上代码： - 前端 api.js 文件添加 withCredentials 设置： import axios from 'axios' axios.defaults.withCredentials = true - 后端 app.conf 文件设置启用 session 和 cookie se
Vue 加入 withCredentials 后无法进行跨域请求
stone_ui的博客
04-03 2134
Vue和django的前后端分离项目，之前通过在django中允许跨域访问实现了跨域请求，但为了使每个请求带上session信息，我设置了withCredentials ,即：axios.de...
Vue在跨域请求时携带cookie的配置withCredentials: true
生有涯，知无涯
06-17 3万+
Vue在发起跨域请求时，后端已经开启CORS，前端需要也携带cookie，此时需要在前端请求头加上withCredentials: true，表示请求可以携带cookie，例如以下为用户注册部分代码。 axios.post(this.host + '/users/', { username: this.username, ...
关于withCredentials不生效的问题
weixin_63549044的博客
09-25 1753
为了实现的登录，获取用户信息这一个功能，我是采用cookie获取用户的相关信息，没有采用JWT令牌校验用户。然而出现前端请求未携带cookie，导致后端无法识别，从而无法获取用户的相关信息。，并告诉你这两者基于安全，是不能同时这样设置的（别问，我也不清楚为什么[苦笑]）。设置成所有的域名都可以访问，就就是设置成“*”，如果你这么做了的话，
vue中 我给axios添加了 withCredentials: true, 就显示跨域了
业余前端的职业经历
10-27 1万+
withCredentials: true, 这个东西 表示每次请求可以携带 cookie 和 session 但是带上这个 后台的跨域模块 "Access-Control-Allow-Origin : “*” 就不能写 * 号了 必须指定 域名 比如 "Access-Control-Allow-Origin : “http://localhost:8080” "Access-Control-Allow-Origin : “*” 当然你上面的这样配置还是不行的 还需要一个 我这里是以 n
//定制请求的实例 //导入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
最后，确保回答符合用户要求的格式：结构清晰，步骤详细，指出每个需要修改的文件及其位置，并给出验证方法，帮助用户逐步解决问题。同时，检查是否遵循了系统级指令，如使用正确的中文术语、LaTeX格式等，但根据...
Vue.js与axios
游王子og的博客
08-25 1238
/ 创建实例时配置默认值});// 创建实例后修改默认值。
Echarts+vue电商平台数据可视化——webSocket改造项目
qq_58956810的博客
12-29 497
/ 有一种报错情况,在组件还没有进行连接成功之前,连接需要一点时间,这个组件就已经进行了加载,就会调用mounted当中指明的send的方法,而send方法是socket_service.js当中定义的一个方法,就会往ws来进行一个send方法的调用,而此时此刻,还没有连接成功。坐标轴的方向是一个从左往右的方向，朝那个方向就选取x1,y1,x2,y2就选取那几个值。websocket的基本使用，用于测试前端能否正常获取到后台数据。横向：0,0,1,0。竖向：0,0,0,1。
vue项目统一响应_在vue项目中：统一封装 Axios 接口与异常处理
weixin_33364925的博客
01-14 541
如图，面对一团糟代码的你~~~真的想说，What FUC~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转...
vue-请求时不带cookie的解决方案
startyangu的博客
11-11 1433
https://blog.csdn.net/qq_35120986/article/details/123927470
axios设置withCredentials导致“跨域”的解决方案
热门推荐
HermitSun的博客
09-13 4万+
前两天调接口的时候，出现了一个从来没遇到过的问题。从报错来看，像是跨域： Access to XMLHttpRequest at 'https://wensun.top/api/market/all?pageNum=0&pageSize=5' from origin 'http://localhost:8888' has been blocked by CORS policy: The v...
vue登录成功后其他的接口无法携带cookie
weixin_46389242的博客
07-25 1360
vue登录成功后其他的接口无法携带cookie
前端中axios中设置了withCredentials = true ,但是依旧不能带上cookie
weixin_64309182的博客
05-28 882
axios 设置了 withCredentials = true 但还是不能带上 cookie 的问题_axios无法设置cookie_在人间负债^的博客-优快云博客
前端跨域配置 axios.defaults.withCredentials = true； 无效的原因
Charonmomo的博客
02-08 1万+
背景 前后端分离项目, 后端返回cookie的方式如下: 在前端配置了 withCredentials = true : axios.defaults.withCredentials = true; 但是cookie信息不能被浏览器保存下来. 虽然登陆接口返回了200, 但是登录实际上是无效的. 这时候登陆接口的一些信息: 原因 网上的文章提到: 如果要发送Cookie，Access-Control-Allow-Origin 就不能设为星号，必须指定明确的、与请求网页一致的域名。 再看上面的
vue2配置proxy（配置多个代理），使得axios.defaults.withCredentials = true生效request header携带cookie
weixin_47454566的博客
05-07 1042
【代码】vue2配置proxy（配置多个代理），使得axios.defaults.withCredentials = true生效request header携带cookie。
【CORS 报错】跨域请求问题：CORS 多种环境下的解决方案
Allen-
07-11 1万+
CORS问题是前端开发中常见的一个挑战，但通过合理的代理配置和服务器设置可以有效解决。在不同环境下，可以使用Vite的代理功能、设置请求头、JSONP、服务器端代理、Nginx代理等多种方式来解决跨域问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值