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

原创 于 2024-11-24 14:38:48 发布 · 301 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

个人理解

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

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

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

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

VUE项目部署后无法请求接口（已解决）
fbqgdxw的博客
03-14 1474
API接口和网站未发布在同一个端口号，一个:8801（API）,一个:8803(项目)。纯前端操作，绕过跨域问题
解决Vue和Beego项目中，Vue请求无法发送cookie，后端无法获取cookie的问题，和解决Vue的axios设置withCredentials之后跨域问题
LagerSwan的博客
12-30 3945
问题一、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 2195
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 1923
为了实现的登录，获取用户信息这一个功能，我是采用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
/ 设置基础 URL 为环境变量 axios.defaults.baseURL = process.env.VUE_APP_API_URL; // 可选：将 axios 挂载到 Vue 原型 Vue.prototype.$axios = axios; new Vue({ // ...其他配置 }).$mount('#app');
09-24
- **问题描述**：在开发环境中，请求不同域名的 API 时可能会遇到跨域问题。 - **解决方案**：可以在开发服务器中配置代理。在 `vue.config.js` 中添加如下配置： ```javascript module.exports = { devServer: { ...
以下为原始文件，哪里需要调整： import axios from 'axios' import { ElMessage, ElLoading } from 'element-plus' //http请求参数 const httpConfig = { isRefreshing: false, //是否正在刷新的标记 loadingInstance: null, //加载效果实例 requests: [] //重试队列，每一项将是一个待执行的函数形式 } /* *请求封装 *参数示例 useHttp({method:'get',url:'auth/login',data:...}) *@params {method,url,data,loading,beforeSend,progress,success,successMsg,error,complete} */ export const useHttp = (params) => { //获取配置变量 const router = useRouter() const runConfig = useRuntimeConfig() //获取token const tokens = useToken().token //获取axios实例 const instance = axios.create() instance.defaults.baseURL = runConfig.public.baseURL instance.defaults.timeout = runConfig.public.timeout instance.defaults.headers = {'content-type': 'application/json'} //如果有token带上 if(tokens && tokens.accessToken) { instance.defaults.headers.Authorization = `Bearer ${tokens.accessToken}` } //标准化参数 params.method = params.method ? params.method.toLowerCase() : 'get' //axios响应拦截器 instance.interceptors.response.use(response => response, async error => { const resp = error.response const originalRequest = error.config if (resp?.status === 401 && resp?.headers['token-expired']) { //如果正在刷新，进入队列 if (!httpConfig.isRefreshing) { const refreshConfig = error.config httpConfig.isRefreshing = true return new Promise((resolve, reject) => { axios({ method: 'post', url: `${runConfig.public.baseURL}/auth/retoken`, headers: {'content-type': 'application/json'}, data: {'refreshToken': tokens.refreshToken} }) .then(async(res) => { useToken().set(res.data.accessToken, res.data.refreshToken) //存储Token const newToken = res.data.accessToken refreshConfig.headers.Authorization = `Bearer ${newToken}` //重新发送队列中的请求 httpConfig.requests.forEach((cb) => cb(newToken)) httpConfig.requests = [] resolve(axios(refreshConfig)) //直接用axios实例 }).catch(async(err) => { //通知队列状态 httpConfig.requests.forEach((cb) => cb(null)) httpConfig.requests = [] //刷新token失败，跳转到登录页面 process.client && ElMessage.error('认证失败，请重新登录') await router.push('/account/login') reject(err) }).finally(() => { httpConfig.isRefreshing = false }) }) } else { return new Promise((resolve, reject) => { httpConfig.requests.push((newToken) => { if(newToken) { originalRequest.headers.Authorization = `Bearer ${newToken}` resolve(axios(originalRequest)) //直接用axios实例 } else { reject(error) } }) }) } } //401没有权限或403刷新token失败 else if(resp?.status === 401 || resp?.status === 403) { //process.client && ElMessage.warning('登录失效，请重新登录') useToken().remove() await router.push('/account/login') } return Promise.reject(error) }) //成功回调 const handleSuccess = (res) => { const message = { status: res.status, contentType: res.headers['content-type'], pagination: res.headers['x-pagination'] ? JSON.parse(res.headers['x-pagination']) : {}, data: res.data } //成功消息(服务端禁用) if (process.client && params.successMsg) { ElMessage.success(params.successMsg) } if(params.success) { params.success(message) } return message } //错误回调 const handleError = async(error) => { const resp = error.response const message = { status: resp?.status, message: resp?.data?.message ? resp?.data?.message : error.message, data: null } if(resp.data instanceof Blob) { //将 Blob 转换为文本 const errorText = await error.response.data.text() //解析 JSON 错误信息 const errorData = JSON.parse(errorText) message.message = errorData.message } //请求超时 if(error.code == 'ECONNABORTED' && error.message.includes('timeout')) { process.client && ElMessage.error(`请求超时，建议更换网络后重试`) } //网络错误(服务端禁用) else if (!resp) { process.client && ElMessage.error(`语法错误：${error}`) } //400:响应错误(服务端禁用) else if (resp.status === 400) { process.client && ElMessage.warning(message.message) } //415:请求方式有误(服务端禁用) else if (resp.status === 415) { process.client && ElMessage.warning("请求类型有误，请检查重试") } //422:数据验证未通过(服务端禁用) else if (resp.status === 422) { process.client && ElMessage.warning('数据验证未通过，请检查重试') } //500:响应错误(服务端禁用) else if (resp.status === 500) { process.client && ElMessage.error('服务器通讯异常，请稍候再试') } //错误回调 if(params.error) params.error(message) return message } //抛出实例调用 return new Promise((resolve, reject) => { let config = {} config.url = params.url config.method = params.method //响应的数据类型 if(params.responseType) { config.responseType = params.responseType || 'json' } //上传文件 if(params.method === 'file') { config.method = 'post' config.headers = { 'content-type': 'multipart/form-data' } config.onUploadProgress = params.progress } //下载文件 if(params.method === 'down') { config.method = 'get' config.responseType = 'blob' config.onDownloadProgress = params.progress } if(params.data) config.data = params.data //加载ElLoading(服务端禁用) if(process.client && params.loading && !httpConfig.loadingInstance) { httpConfig.loadingInstance = ElLoading.service({ body: true, lock: true }) } //请求前调用 if(params.beforeSend) params.beforeSend() //发送请求 instance.request(config).then(res => { //成功回调 resolve(handleSuccess(res)) }).catch(error => { //错误回调 reject(handleError(error)) }).finally(() => { //完成调用 if(params.complete) params.complete() if (httpConfig.loadingInstance) httpConfig.loadingInstance.close() }) }) }
最新发布
10-03
1. 在Vue3中如何优雅地管理全局加载状态（如多个请求同时发生时只显示一个加载动画）？ 2. 如何实现Axios的请求重试机制（包括指数退避算法）？ 3. 在Nuxt3中如何安全地存储和使用JWT token（避免XSS和CSRF攻击）？ ...
//定制请求的实例 //导入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格式等，但根据...
<script> import { reactive, toRefs } from 'vue'; import { useRouter } from 'vue-router'; import { setsessionStorage } from '../common.js'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:8088/tijiancms/'; export default { setup() { const router = useRouter(); const state = reactive({ loginForm: { docCode: '', password: '' }, }); const login = () => { if (state.loginForm.docCode === '') { alert('医生编码不能为空！'); return; } if (state.loginForm.password === '') { alert('登录密码不能为空！'); return; } axios.post('doctor/getDoctorByCodeByPass', state.loginForm) .then((response) => { let doctor = response.data; if (doctor !== '') { setsessionStorage('doctor', doctor); router.push('/ordersList'); } else { alert('医生编码或登录密码不正确！'); } }; .catch((error) => { consol.error(error);修改
04-27
嗯，用户之前遇到了Axios的ERR_NETWORK错误，现在想解决这个问题并修正代码中的错误。我需要结合之前的回答和用户提供的引用内容来给出解决方案。 首先，用户提到的引用[1]指出，Axios和Fetch都是基于AJAX的实现，...
vue3的 webapck3升级到5后，axios如何封装 import axios from 'axios'; import router from './router'; import cookies from "@/libs/util.cookies"; axios.defaults.timeout = 15000; if (window.axiosPromiserArray === undefined) { window.axiosPromiserArray = []; } axios.interceptors.request.use( config => { config.headers.URL = window.location.href; if('/api/v1/old/csbiTree' !== config.url && '/api/user' !== config.url) { config.cancelToken = new axios.CancelToken(cancel => { window.axiosPromiserArray.push({cancel}); }) } let authorization = cookies.getCookie('Authorization'); if (authorization) { config.headers['Authorization'] = authorization } return config; }, error => { return Promise.reject(error) } ); axios.interceptors.response.use( response => { if (response.data.errno === 999) { router.replace('/'); } return response; }, error => { if (error && error.request && error.request.getResponseHeader && error.request.getResponseHeader('redirectUrl')) { const status = error.request.getResponseHeader('status'); if (!error.response || error.response.status === 401 || status === 'logout') { location.href = error.request.getResponseHeader('redirectUrl'); } } if (error.response && error.response.data && error.response.data.errorCode && error.response.data.errorMessage) { } if (axios.isCancel(error)) { return new Promise(() => {}); } return Promise.reject(error); } ); export default axios;
07-04
在 Vue3 项目中，从 Webpack 3 升级到 Webpack 5 后，虽然构建工具底层变化较大（例如引入了持久缓存、更好的 Tree Shaking 支持等），但对 `axios` 的封装逻辑影响不大。你原来的封装方式已经比较完整，主要涉及...
vue-请求时不带cookie的解决方案
startyangu的博客
11-11 1475
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...
前端通用保存用户登录状态之“withCredentials“
qq_44963669的博客
12-05 1090
前端通用保存用户登录状态之"withCredentials"标题阐述如何开放使用withCredentials开放证书触发的问题及解决方式 标题阐述 在前端里面如何保存用户登录状态，即是难点也是一种非常常用的技术，通过判定用户的状态来开启部分功能或者全部功能。 常见的有： 浏览器的localStorage、sessionStorage来维持登录状态 vue 的vuex 来共享用户状态 前端开放浏览器的证书来维持用户的登录状态 这里嘛小编就第三点来进行阐述。 如何开放使用withCredentials
axios发请求报错
weixin_46787337的博客
04-07 1037
instance.defaults.withCredentials = true; instance.defaults.headers.common["Authorization"] = AUTH_TOKEN!; axios这两个属性一起使用会报错 平时应该只设置其中一个用与验证 如果要用cookie+session的形式验证的话 instance.defaults.withCredentials = true; 这个属性必须设置 后台必须把下面的响应头都设置上 response.statusCod
vue登录成功后其他的接口无法携带cookie
weixin_46389242的博客
07-25 1387
vue登录成功后其他的接口无法携带cookie
前端中axios中设置了withCredentials = true ,但是依旧不能带上cookie
weixin_64309182的博客
05-28 925
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 就不能设为星号，必须指定明确的、与请求网页一致的域名。 再看上面的
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值