SpringBoot+Vue:一站式解决跨域问题
引言
在前后端分离的开发模式下,前端Vue应用和后端SpringBoot服务往往部署在不同的域名下。由于浏览器的同源策略限制,这会导致跨域问题。本文将介绍如何在SpringBoot和Vue项目中一站式解决跨域问题。
什么是跨域问题?
跨域问题(CORS,Cross-Origin Resource Sharing)是由于浏览器的同源策略导致的一种安全限制。当一个请求的域名、协议或端口与当前页面不一致时,就会触发跨域问题。
SpringBoot中解决跨域的几种方案
方案一:使用@CrossOrigin
注解
在SpringBoot中,可以使用@CrossOrigin
注解来允许跨域请求。你可以将其添加到Controller类或具体的方法上。
@RestController
@ResponseBody
public class BasicController {
// http://127.0.0.1:8080/user
@RequestMapping("/user")
@CrossOrigin("http://localhost:5173")
public User user() {
User user = new User();
user.setName("张三");
user.setAge(666);
return user;
}
}
使用@CrossOrigin
注解后成功响应
方案二:全局CORS配置
通过实现WebMvcConfigurer
接口并重写addCorsMappings
方法,可以进行全局跨域配置。
package com.star.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 跨域配置
*
* @author WYH
* @since 2024/5/5 下午3:03
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 允许跨域请求的路径
.allowedOrigins("http://localhost:5173") // 允许的域名
.allowCredentials(true) // 允许携带认证信息(前后端保持一致)
.maxAge(3600) // 预检请求缓存时间,1小时
.allowedHeaders("*") // 允许的请求头
.allowedMethods("GET", "POST", "PUT", "DELETE"); // 允许的方法
}
}
成功响应
方案三:使用CorsFilter
创建一个配置类,使用CorsConfiguration
和UrlBasedCorsConfigurationSource
来配置CORS,并返回CorsFilter
对象。
package com.star.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 过滤器
*
* @author WYH
* @since 2024/5/5 下午3:10
*/
@Configuration
public class CorsFilterConfig {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); // 允许携带认证信息
config.addAllowedOrigin("http://localhost:5173"); // 允许的域名
config.addAllowedHeader("*"); // 允许所有请求头
config.addAllowedMethod("*"); // 允许所有请求方法
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
成功响应
Vue中解决跨域的注意事项
在Vue项目中,通常不需要特别处理跨域问题,因为跨域问题主要发生在浏览器端。但若后端服务部署在服务器上,而开发环境的Vue应用运行在本地,可以通过以下方式解决:
- 开发服务器代理:在Vue2项目中,可以使用
vue.config.js
文件配置开发服务器的代理。
注意:该方法仅适用于开发环境中使用,生产环境中可以配置nginx代理服务器来实现类似的功能
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
Vue3(vite构建)项目中,可以使用vite.config.js
文件配置开发服务器的代理。
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端地址
changeOrigin: true, // 允许跨域
rewrite: path => path.replace(/^\/api/, '') // 路径重写
}
}
}
})
- 生产环境部署:在生产环境中,确保Vue应用和后端服务之间的域名配置正确,以便后端服务可以正确处理跨域请求。
总结
跨域问题虽然常见,但通过SpringBoot提供的多种解决方案,结合Vue项目中的配置,可以轻松解决。在实际开发中,应根据项目需求和部署环境,选择最合适的跨域解决方案。同时,要注意在生产环境中合理配置CORS,以避免潜在的安全风险。
如果对你有帮助的话,不妨点个赞,点个关注再走吧!
接Java毕设、课设,提供远程调试指导,有需要的话+V了解
更多推荐
所有评论(0)