axios + springboot 跨域问题cookie

最新推荐文章于 2024-04-06 13:00:21 发布
最新推荐文章于 2024-04-06 13:00:21 发布
阅读量715 收藏 2
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40152706/article/details/99685561

最近在用Vue + springboot 做一个前后端分离的项目，但是在开发的过程中后端涉及shiro框架的用户权限控制，需要通过请求头中的set-cookie进行用户的认证，然而axios中默认axios.defaults.withCredentials=false;是禁止ajax携带cookie的 所以需要改为true

但是之前在cors类中设置的AllowOrigin当允许携带cookie时不能指定为* 所以做了以下的改动 同时要设置 setAllowCredentials为true

配置如下：
在这里插入图片描述

qq_40152706
关注
springboot + vue 后台token生成 拦截器 redis实现 前台封装axios xueX 接口实现
邱海健的博客
05-13 472
后台 后台程序图片 新建token的基础类 public class Constants { public final static String TOKEN = "token"; } 配置redis pom.xml中添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis&
跨域资源共享 CORS 详解
weixin_34365417的博客
04-19 2458
跨域资源共享 CORS 详解作者：阮一峰日期：2016年4月12日CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介...
SpringBoot+Vue+Axios cookie跨域处理
Joker_DJ
03-05 516
话不多说直接上代码 vue： mian.js import Vue from 'vue' import App from './App' import axios from "axios" axios.defaults.withCredentials=true //允许cookie跨域 Vue.config.productionTip = false Vue.prototype.$axios = axios//初始化axios /* eslint-disable no-new */ new Vue({
axios请求springboot跨域并携带cookie的办法
q3252342的博客
07-28 729
解决vue+axios请求springboot后台接口跨域并携带cookie的问题
axios springboot 跨域问题解决 Access-Control-Allow-Origin Access-Control-Allow-Credentials
tang_jian_dong的博客
09-03 4863
这是本地环境解决用的， 部署服务器测试或生产环境时必须注释掉， 服务器环境下有nginx可以解决跨域问题。 最终解决为步骤 5。 1：403 前端访问后端controller 403 , 代表跨域无权限访问 2: 后端类加上 @CrossOrigin 放开权限的注解， 3：@CrossOrigin 为 * ， 下图图片Access-Control-A...
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
10-17
在前后端分离的架构中，Vue.js作为前端框架与Spring Boot作为后端服务进行交互时，常常会遇到跨域和Session、Cookie失效的问题。本文将详细介绍如何解决这些问题。 首先，跨域是由于浏览器的安全策略限制，同一源...
Vue3+Ts+SpringBoot 跨域问题
weixin_52658189的博客
12-13 650
vue3+ts语法+springboot跨域实现
不使用反向代理解决跨域问题，含前后端代码及详细注解（axios+springboot）
yeshuboss的博客
01-29 418
不使用反向代理解决跨域问题含前后端代码及详细注解（axios+springboot），几乎完整代码直接可用。
SpringBoot+Vue项目跨域问题
道友，山高路远，如果找不到答案就去找自己。
03-26 482
当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时，那说明跨域了。
vue axios springboot 跨域导致后台无法获取session的问题
qq_41202539的博客
03-22 924
最近在做毕设，刚开始学vue，遇到了跨域问题。 经过搜索发现，大多数教程都是在前端axios设置 axios.defaults.withCredentials = true 同时后台设置拦截器，允许跨域 //这里括号中不能用 * corsConfiguration.addAllowedOrigin("http://localhost:8080"); 但是经过反复测试，你会发现网上的教程大部分都不管用，导致我浪费了整整一天的时间！！！！ 关于上述教程有需要的可以自行百度。 最后重点来了！！！！！！ 如果你是
Vue使用axios跨域访问springboot
qq_45562888的博客
07-06 192
java配置config import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class VueConf
SpringBoot+vue中Axios跨域问题（后端配置类的解决方式）通俗易懂
xu_3333的博客
05-22 318
Axios的跨域问题 问题描述 比如vue在8080端口，boot在8081端口，两个端口相互访问会受到阻碍 解决方式 可以在前端解决跨域问题，也可以在后端解决跨域问题，并切解决的方式也是不同样的，这次我介绍的是Boot后端配置类的解决方式 1.在boot项目里创建配置类并实现WebMvcConfigurer接口 @SpringBootConfiguration public class ConFig implements WebMvcConfigurer { public void addCor
axios和Springboot项目交互时跨域处理
tianyaleixiaowu的专栏
05-27 2102
跨域本身是个很简单的问题，到处都能找到相关的后台配置教程。多数都是如下，定义个filter，再把filter注册一下就好了。 public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest httpRequest, ServletResponse res, Fi...
axios允许跨域携带cookies踩过的坑
扮老虎的猪
07-10 762
需要设置参数withCredentials=true. axios.defaults.withCredentials=true. 注意，没有headers!!! 同时，后端Access-Control-Allow-Origin不能为*
Axios跨域问题解决：SpringBoot跨域解决方案
AlaiaCodeingLife
06-23 940
后端在ioc容器中添加对跨域的支持,需要自取: import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.
springboot2 解决跨域问题,跨域携带cookie
a704397849的博客
01-03 5996
跨域问题，同源策略，CORS 这些介绍的文章网上搜下很多，不解释了。 我实际项目( springboot2 ) 中解决了跨域问题的方法：添加一个配置类 CorsConfig import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; ...
项目实践经历怎么写，vue封装axios请求springboot 及跨域问题，阿里P8亲自讲解
m0_60229361的博客
04-06 683
new Vue({router,store,})vue页面请求methods:{})},springboot后端:Controller//前端传过来的是json类型的值 需要加上这个注解@RequestBody 不然接收不到值service@Overridemapper/**根据id查询@param id@return*/mapper xml执行后浏览器控制台出现了跨域问题前端config下的index.js加上。
前端vue axios 后端spring boot解决跨域 只需要看这一篇文章就够了
qq_38755190的博客
08-21 220
前端vue axios 后端spring boot解决跨域 只需要看这一篇文章就够了
vue封装axios请求springboot 及跨域问题
qq_41389920的博客
04-21 456
vue页面 安装element-ui npminstall element-ui --save 安装axios插件 npminstall axios --save 创建个http.js import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 500...
vue+springboot怎么跨域访问
最新发布
01-23
### 解决Vue和Spring Boot项目之间跨域访问问题 为了有效解决Vue前端应用与Spring Boot后端服务之间的跨域请求问题，可以采用多种方法来配置跨域支持。 #### 方法一：通过`@CrossOrigin`注解实现简单跨域设置 在控制器层面上使用`@CrossOrigin`注解是一种简便的方法。此注解可以直接应用于整个控制器类或特定的HTTP处理函数上，从而允许来自指定源的请求[^1]。 ```java @RestController @RequestMapping("/api") @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600) public class MyController { // 控制器逻辑... } ``` 这种方法适用于小型应用程序，在开发阶段非常有用；但对于生产环境下的复杂需求，则可能不够灵活。 #### 方法二：全局配置CORS过滤器 对于更复杂的场景，推荐创建一个专门用于管理跨域资源共享（CORS）策略的配置文件。这可以通过继承`WebMvcConfigurer`接口并重写其`addCorsMappings()`方法来完成： ```java @Configuration public class CrossConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 允许所有来源 .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS") // 支持的方法列表 .maxAge(3600) // 预检请求的有效期为一个小时 .allowedHeaders("*"); // 所有头部都可接受 } } ``` 这种方式提供了更高的灵活性，并且能够更好地适应不同类型的客户端连接[^2]。 #### 前端Axios默认配置调整 除了服务器端的变化外，还可以考虑修改前端项目的axios实例，默认情况下自动附带凭证信息（如Cookies），这对于某些安全敏感的应用可能是必要的。如果不需要携带认证信息的话，可以在初始化时关闭它： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, withCredentials: false, // 不随同请求一起发送cookie }); export default instance; ``` 这样做有助于减少不必要的麻烦，特别是在测试环境中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值