【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑 已解决

已于 2022-01-29 10:38:54 修改
阅读量5k 收藏 8
点赞数 3
分类专栏： Vue 前端 文章标签： 前端 javascript vue
于 2022-01-28 12:59:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44752429/article/details/122728790
版权
本文分享了在Vue项目中使用Axios进行前后端对接时遇到的跨域问题，包括'Access-Control-Allow-Origin'缺失、携带Cookie请求失败以及Set-Cookie未写入浏览器等问题，并提供了详细的前端（Vue、Axios配置）和后端（Springboot）解决方案。
摘要由CSDN通过智能技术生成

前后端对接必出bug，最近连续对接了两个项目，对解决跨域有点感觉了，跟大家分享一下经验，都是血的教训…

两个项目都是Springboot+Vue（axios网络请求）。本人主要负责前端，所以前端会分享具体的代码，后端就大致分享一下相应的解决思路。（如果你是后端，应该都懂；如果你是前端，就把思路告诉你的后端，他应该都懂~）

第一个坑：No ‘Access-Control-Allow-Origin’ header

首先，最初也是最常见的情况。在浏览器直接输入网址可以访问到后端，但是前端无法请求到。跨域报错信息：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述
后端解决方案：这一步前端还不需要做啥，后端在响应头中把“Access-Control-Allow-Origin”设置为“*”，这是大家最熟悉的解决方案了。

第二个坑：登录前的页面一切正常，登录后的页面，也就是需要携带cookie请求的页面，就会出现401报错，即用户没有访问权限，需要进行身份认证，说白了就是没有携带cookie请求后端。

前端解决方案：这是axios的坑，axios发送请求默认不携带cookie，需要前端设置一

最低0.47元/天 解锁文章
BugFrog1024
关注
专栏目录
axios中cookie跨域及相关配置示例详解
08-28
自从入了 Vue 之后，一直在用 axios 这个库来做一些异步请求。下面这篇文章主要给大家介绍了关于axios中cookie跨域及相关配置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。
cookie origin
weixin_30594001的博客
07-23 252
https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/ 转载于:https://www.cnblogs.com/qinqiu/p/9354383.html
axios请求携带cookie报错，后端跨域设置
最新发布
qq_67733013的博客
08-21 525
今天写项目的时候前端通过axios发生请求，可以正常发送，也可以正常获取数据。但是当我给前端axios带上cookie去请求的时候问题就来，说我跨域了。后端偷懒直接通过@CrossOrigin注解来解决跨域问题的，在使用@CrossOrigin的时候没有传递任何的值，错就错在这。这样就可以解决axios请求携带cookie时的跨域问题了。：后端需要明确告诉浏览器它允许携带凭据的请求。，必须明确指定允许的域名，例如。
axios请求携带cookie实现跨域（后端springsecurity）
Javaer
06-20 480
axios请求携带cookie实现跨域（后端springsecurity） /*CORS跨域配置*/ @Bean CorsConfigurationSource corsConfigurationSource(){ CorsConfiguration configuration=new CorsConfiguration(); configuration.addAllowedOrigin("http://localhost:3000"); //设置
vue-cli 与 axios 跨域的cookie配置，教你摆脱后端依赖
03-08 5728
写在前面 某天，某人正在认真的写 bug 突然，线上环境有个问题，测试环境无法复现。测试说，莫得办法，连上线上环境自己搞下？ 某人：那不就跨域了吗？？ 赶紧翻翻 vue-cli 的跨域咋配置的？ module.exports = { devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/fo
vue3+vite+axios，处理跨域cookies问题
weixin_39559449的博客
09-06 5450
方法一：一般vite是可以配置跨域代理的，这个时候就不需要后端配合设置跨域了 在.env.development 文件配置 # vite 本地跨域代理 VITE_PROXY=[["/basic-api","http://localhost:3000"]] # 接口地址 VITE_GLOB_API_URL=/basic-api 由于 /basic-api 匹配到了设置的 VITE_PROXY，所以上方实际是请求 http://localhost:3000/login，这样同时也解决了跨域问题。（3100为项
Vue axios 跨域请求无法带上cookie的解决
10-14
总之，解决Vue axios跨域请求无法携带cookie的问题，需要前端设置`axios.defaults.withCredentials = true`，后端设置`Access-Control-Allow-Credentials: true`，并且`Access-Control-Allow-Origin`要正确指向前端...
Vue 3.x+axios跨域方案的踩坑指南
10-16
在现代Web开发中，前后端分离已成为一种常见模式。前端使用Vue.js框架开发用户界面，而服务端则处理后端逻辑。跨域问题是在开发过程中不可避免的，特别是在前端使用Vue3.x框架结合axios库进行开发时。跨域请求是指...
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单...
axios 解决cookie跨域问题
weixin_42319195的博客
01-25 1682
1.问题背景： 前端使用vue,axios 调用服务端api, 前端域名：aaa.bb.u.cn 后端域名：server.ss.u.cn 发现后端写完session,cookie后，浏览器获取不到session,查看浏览器也没有cookie,此时已经确保后端的session和cookie是种成功的 并且，再服务端的配置中，已经设置了跨域支持，如下： location ~ /*.php$ { add...
axios 跨域携带cookie设置
ann49988的博客
07-25 522
import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // node环境的不同，对应不同的baseURL timeout: 5000, // 请求的超时时间 //设置默认请求头，使post请求发送的是formdata...
axios.defaults.withCredentials跨域携带cookie
m0_59975180的博客
11-21 1061
withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。前端通过将withCredentials属性设置为true指定某个请求应该发送凭据。
axios 跨域的解决办法
为啥不能换名字的博客
12-05 2416
一、设置浏览器 1下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏  windows下面用 版本号49之前的跨域设置 --disable-web-security （前边有一个空格哦） 版本号49之后的跨域设置 --disable-web-security --user-data-dir=C:\MyChromeDevUserData（前边有一个空格哦） ...
vue谷歌浏览器cookie跨域问题
shaxibulidane的博客
02-06 898
在vuex项目里搞iframe嵌套时，iframe里登录点击不跳转
axios的基本应用
qesrdtcfvgb的博客
09-28 275
安装：npm install axios -S # 也可直接下载axios.min.js文件 1、axios借助Qs对提交数据进行序列化 axios发送get请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>发送AJAX请求</title> </head> <body> &l
axios 跨域处理以及带 cookies 的请求
飞翔的熊blabla
10-24 734
背景 在开发 vue 的项目时，使用 axios 来与后端交互，经常会遇到几个问题 请求跨域 请求中带 cookies 请求跨域解决方案 解决请求跨域有以下两种方案 同源访问 后端允许跨域请求 这里主要针对非同源情况做介绍，解决请求跨域需要后端配合处理，下面直接看代码，这里的 demo 中，前端运行在 localhost:1234，后端运行在 localhost:3000，不满足同源协...
axios允许跨域携带cookies踩过的坑
扮老虎的猪
07-10 679
需要设置参数withCredentials=true. axios.defaults.withCredentials=true. 注意，没有headers!!! 同时，后端Access-Control-Allow-Origin不能为*
axios/fetch/ajax面试应用宝典-跨域请求携带cookie
m0_46176711的博客
08-30 970
一篇文章，带你了解axios/fetch/ajax兄弟3人的差异，以及跨域请求携带cookie的案列分享
vue axios 跨域 cookie
08-15
在 Vue 中使用 axios 进行跨域请求并携带 cookie，你需要进行一些配置。 首先，在你的 Vue 项目中安装 axios： ```bash npm install axios ``` 然后，在你的 Vue 项目中创建一个单独的 axios 实例，用于跨域请求： ```javascript // main.js import axios from 'axios'; const instance = axios.create({ baseURL: 'http://example.com', // 替换成实际的服务器地址 withCredentials: true, // 允许携带 cookie }); Vue.prototype.$axios = instance; ``` 这样，你就可以在整个 Vue 项目中使用 `$axios` 来发送跨域请求，并携带 cookie。 例如，在某个组件中发送跨域请求： ```javascript // MyComponent.vue export default { mounted() { this.$axios.get('/api/data') .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); }, } ``` 需要注意的是，确保服务器端已经正确设置了跨域响应头，允许携带 cookie。参考前一个回答中的服务端设置部分。 通过以上配置，你应该可以在 Vue 中使用 axios 进行跨域请求并携带 cookie 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值