解决vue请求springBoot项目时跨域问题
由于浏览器同源策略的限制,如果请求url的协议、域名、端口号中有一项不同,就会产生跨域问题
当我们在本地开始前后端分离项目时,必然会启动不用的端口,所以就会发生跨域问题
比如我现在vue项目占用端口为8080,然后发axios请求到8082端口,浏览器就会报如下错:
我解决这个问题是在后端解决的,添加一个配置类实现WebMvcConfigurer
接口,然后实现它的addCorsMappings
方法,代码如下
package com.example.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* @description:开启跨域请求
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")/*允许跨域访问的路径*/
.allowedOriginPatterns("*")/*允许访问的客户端域名*/
// .allowedOrigins("*")把这个换成allowedOriginPatterns单词
.allowedMethods("*")/*允许访问的方法名,GET POST等("POST", "GET", "PUT", "OPTIONS", "DELETE")*/
.allowCredentials(true)/*是否发送cookie*/
.maxAge(3600)/*预检间隔时间*/
.allowedHeaders("*");/*允许服务端访问的客户端请求头*/
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤