引言

在前后端分离的开发模式下，前端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应用运行在本地，可以通过以下方式解决：

1. 开发服务器代理：在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/, '') // 路径重写
            }
        }
    }
})

2. 生产环境部署：在生产环境中，确保Vue应用和后端服务之间的域名配置正确，以便后端服务可以正确处理跨域请求。

总结

跨域问题虽然常见，但通过SpringBoot提供的多种解决方案，结合Vue项目中的配置，可以轻松解决。在实际开发中，应根据项目需求和部署环境，选择最合适的跨域解决方案。同时，要注意在生产环境中合理配置CORS，以避免潜在的安全风险。

如果对你有帮助的话，不妨点个赞，点个关注再走吧！
接Java毕设、课设，提供远程调试指导，有需要的话+V了解