解决vuecli中axios请求跨域无法携带cookie

已于 2023-12-13 10:08:12 修改
阅读量284 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-12-13 10:06:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66196770/article/details/134964871
版权

解决vuecli中axios请求跨域无法携带cookie

开发过程中如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  devServer: {
    proxy: 'http://xxxxxxxxxxx'
  }
});

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://xxxxxx下发起请求，这样就不会存在跨域问题了

才艺のblog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue axios 跨域请求无法带上cookie的解决
10-14
主要介绍了Vue axios 跨域请求无法带上cookie的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
axios 解决跨域不携带 cookie 的问题
ZL_2014的博客
04-16 1349
文章目录1. 说明2. 解决方案2.1 后端2.1 前端axios配置 1. 说明         后端使用CORS解决跨域问题，会导致axios请求不再携带cookie., 因此在需要使用session的场合的时候，后端给即使前端设置了JSESSIONID，后端的请求也不会携带其到请求头中。 2. 解决方案 2.1 后端          这里
vue-cli axios请求方式及跨域处理问题
08-27
主要介绍了vue-cli axios请求方式及跨域处理问题,文中还给大家提到了vue中axios解决跨域问题和拦截器使用，非常不错，具有参考借鉴价值，需要的朋友参考下吧
VUE项目axios请求头更改Content-Type操作
10-15
主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目出现的问题：ERESOLVE could not resolve
热门推荐
静韧
01-07 2万+
vue项目执行npm install 出现的问题
使用vueuse存储、读取cookie
samate6666的博客
09-14 1047
使用vueuse快速存储、获取cookie
axios 设置了 withCredentials = true 但还是不能带上 cookie 的问题
在人间负债^
04-10 2889
简单的来说就是出现了跨域请求，但浏览器默认的SameSite=Lax是不支持跨域下cookie操作的。因此设置cookie失败。打开谷歌浏览器，地址栏输入：chrome://extensions/然后打开开发者模式，把下载的拖进去。解决方法有很多，有通过代码解决的，可以通过设置浏览器来解决，但是不能要求所有用户都改浏览器设置。，让请求来携带 cookie，但浏览器依旧无法携带 cookie。方法一：添加一个SpringSession配置类。方法二：在yml配置文件中添加配置。
vue登录成功后其他的接口无法携带cookie
weixin_46389242的博客
07-25 1108
vue登录成功后其他的接口无法携带cookie
vue前后端分离项目http请求携带cookie设置问题
lemon
06-23 979
问题描述 前后端完全分离的项目，前端使用Vue + axios， 使用CORS协议解决跨域访问数据限制的问题，但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie：SESSIONID 导致每一个Ajax请求在服务端看来都是一个新的请求，都会在服务端创建新的Session（在响应消息头中设置Set-Cookie：JSESSIONID=xxx） 解决方法 首先前端方面 在main.js文件中加上 axios.defaults.withCredentials=true; 最后后端方面 解决跨域问题
vue axios请求超时的正确处理方法
08-27
主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法，需要的朋友可以参考下
VUE axios发送跨域请求需要注意的问题
08-30
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下
前端vue项目发送请求不携带cookie（vue.config.js和nginx反向代理）
黎小小的博客
01-05 3532
本来发现问题，是因为后台记录到接收到的sessionId一直在变化，导致需要在同一个sessionId下处理的逻辑无法实现。后来才发现前端发的请求都没有带cookie，就是这里，我的之前是不带这个Cookie的。接口文件api.js中设置每次携带cookie。
axios请求无法携带cookie
weixin_30378311的博客
07-09 4389
　　背景　　 　　　　最近在用vue重构公司公司AngularJS 1.X项目，老项目身份认证采用的cookie，前端ajax库采用是angularJS的$http/$resource服务，新版采用的是axios，但是发现前端http响应头中少了Set-Cookie属性，同时在浏览器中查询不到cookie信息,服务端也接收不到cookie信息。postman请求正常，使用axios请求不正常，如...
axios跨域请求设置并携带Cookies
weixin_39515823的博客
11-06 1万+
when the request’s credentials mode is ‘include’.」时说当请求是携带凭据模式（即Access-Control-Allow-Credentials: true、携带Cookie）时，Response的header “Access-Control-Allow-Origin” 的值不能是“但是，接下来在域名oauth.szile.com域名下请求接口时，请求没有携带设置的Cookie，这是问什么？查看Application下Cookie，确实是没有设置成功。
vue axios 请求不带cookie问题
qq_35120986的博客
04-02 5547
场景: 有时后端需要处理验证前端带有的cookie, 然而axios请求默认不携带cookie,所以后端获取不到cookie导致验证失败. 解决方法（二者选其一就行）: 1. 每次想携带cookie的axios请求,加上 withCredentials:true 的属性. 2. 修改axios默认配置, 使得每次请求默认携带cookie. import axios from 'axios' axios.defaults.withCredentials=true; 总结：第一种方式应用于
vue 登陆成功后携带不了后台传来的 set-cookie 并携带请求错误处理
大白的博客
11-11 1万+
正常情况下，当一个接口中反回了该值，其他接口再提交请求，浏览器会自动附加的，不需要你额外关心。 但是使用了axios的时候，发现cookie携带不过去，原以为是没有获取到，后来发现是axios搞的鬼 表现：登陆成功后，发送的接口中，没有携带过去cookie，导致后台获取不到cookie，并且返回错误信息 原因：在axios中默认是不让后端写入cookie的 解决办法：在main.js中或者...
axios 发送请求请求头信息不包含Cookie信息
T_Y_F_的博客
06-22 2491
axios 发送请求请求头信息不包含Cookie信息
Spring Cloud Gateway直接管理Vue.js的静态资源
最新发布
wddblog的博客
04-28 515
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
在vue项目中axios解决跨域问题
06-01
在Vue项目中使用axios发起跨域请求存在以下几种解决方案： 1. 通过设置proxyTable代理解决跨域 在`config/index.js`中可以找到`dev`下的`proxyTable`属性，可以设置代理规则，如下所示： ``` module.exports = { dev: { // ... proxyTable: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '/mock' // 将/api替换为/mock } } } } } ``` 上面的代码中，代理规则中的`/api`表示需要代理的请求路径，`target`表示代理目标地址，`changeOrigin`表示是否改变请求头中的origin字段，`pathRewrite`表示路径重写规则。 2. 在服务器端设置CORS（跨域资源共享）策略 在服务器端设置CORS策略，允许指定的域名或IP地址访问API。具体的设置方法可以参考服务器框架的文档，比如，如果是使用Express框架，可以通过以下代码启用CORS： ``` const express = require('express') const app = express() app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://localhost:8080') // 允许访问的域名或IP地址 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') // 允许的请求方法 res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization') // 允许的请求头 res.header('Access-Control-Allow-Credentials', 'true') // 是否允许发送Cookie next() }) // 其他路由和中间件 ``` 3. 使用JSONP解决跨域 JSONP是一种跨域请求方式，只支持GET请求，但是需要服务器端支持。在Vue中可以使用vue-jsonp插件来实现JSONP请求，具体使用方法可以参考插件文档。 以上三种方法都可以解决Vue项目中使用axios发起跨域请求的问题，选择哪种方法取决于具体的应用场景和服务器端环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值