的方法)
在作前后端分离的web项目时，经常会遇到一些跨域问题，以下是我总结的一些跨域方法
1.后端配置
1.java（springboot）解决
第一种：使用@CrossOrigin解决，该方法简单灵活但配置不够集中统一，但只在局部有效，在大型应用中稍显吃力
@CrossOrigin(//允许跨域的urlorigins="http://localhost:3000",//允许接受的请求方法methods={RequestMethod.GET,RequestMethod.POST,RequestMethod.PUT},//允许的请求头allowedHeaders="*",//允许的预检请求的缓存时间maxAge=3600)第二种：使用WebMvcConfigurer接口解决，该方法为全局配置
importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration//声明配置类publicclassGlobalCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping("/api/**")// 对所有 /api/ 开头的路径生效.allowedOrigins("http://localhost:3000")// 允许跨域的url.allowedMethods("GET","POST","PUT","DELETE","OPTIONS")// 允许的请求方法.allowedHeaders("*")// 允许所有请求头（可以更改）.allowCredentials(true)// 允许携带 Cookie 等凭证.maxAge(3600);// 预检请求缓存时间}}2.Node.js
首先安装依赖
npmi corsnpmi express然后进行配置
constexpress=require('express');//导入express包constcors=require('cors');// 导入 cors 包constapp=express();// 只允许特定域名（相当于 allowedOrigins("http://localhost:3000")）constcorsOptions={origin:'http://localhost:3000',credentials:true// 允许携带 Cookie};app.use(cors(corsOptions));//如果直接app.use(cors)代表允许所有url跨域如果想要对单个接口进行跨域配置
// 只有这个接口允许跨域app.get('/api/public',cors(),(req,res)=>{res.json({msg:'允许'});});// 这个接口不允许跨域（如果没有全局 cors）app.get('/api/private',(req,res)=>{res.json({msg:'拒绝'});});2.开发环境配置代理
vite进行配置
exportdefault{server:{proxy:{'/api':{target:'http://后端地址:8080',// 目标后端changeOrigin:true,// 修改请求头中的 Origin// rewrite: (path) => path.replace(/^\/api/, '') // 可选：路径重写}}}}
