石家庄新闻头条文明seo

跨域问题是前端与后端分离开发中的常见挑战，以下是14种完整的解决方案：

1 前端解决方案( 开发环境代理)

1.1 Webpack开发服务器代理

// vue.config.js 或 webpack.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

1.2 Vite代理配置

// vite.config.js
export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

1.3 JSONP (仅限GET请求)

function jsonp(url, callback) {const script = document.createElement('script');script.src = `${url}?callback=${callback}`;document.body.appendChild(script);
}// 后端需要返回类似 callbackName(data) 的响应

1.4 WebSocket

const socket = new WebSocket('ws://your-backend-url');

1.5 修改浏览器安全策略 (仅开发环境)

• Chrome启动参数：--disable-web-security --user-data-dir=/tmp/chrome

2 后端解决方案

2.1 Spring框架解决方案

2.1.1 使用@CrossOrigin注解

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*") // 允许所有来源
public class MyController {// 控制器方法
}

2.1.2 全局CORS配置

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:3000", "http://example.com").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true).maxAge(3600);}
}

3.1.2 过滤器方式

@Bean
public FilterRegistrationBean<CorsFilter> corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("http://localhost:3000");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);return new FilterRegistrationBean<>(new CorsFilter(source));
}

2.2 Spring Boot特定配置

2.2.1 application.properties配置

# 允许的源
cors.allowed-origins=http://localhost:3000,http://example.com
# 允许的方法
cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS
# 允许的头部
cors.allowed-headers=*
# 是否允许凭证
cors.allow-credentials=true
# 预检请求缓存时间
cors.max-age=3600

2.3 Spring Security解决方案

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.cors().and()// 其他安全配置.csrf().disable(); // 通常需要禁用CSRF以简化API开发}@BeanCorsConfigurationSource corsConfigurationSource() {CorsConfiguration configuration = new CorsConfiguration();configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000"));configuration.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE","OPTIONS"));configuration.setAllowedHeaders(Arrays.asList("*"));configuration.setAllowCredentials(true);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", configuration);return source;}
}

3 生产环境解决方案

3.1 Nginx反向代理

server {listen 80;server_name yourdomain.com;location /api {proxy_pass http://backend-server:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location / {root /path/to/frontend/dist;try_files $uri $uri/ /index.html;}
}

4 高级方案

4.1 基于Token的跨域认证

// 后端添加响应头
response.setHeader("Access-Control-Expose-Headers", "Authorization");
response.setHeader("Authorization", "Bearer " + token);

4.2 预检请求(OPTIONS)处理

@RestController
public class OptionsController {@RequestMapping(value = "/**", method = RequestMethod.OPTIONS)public ResponseEntity<?> handleOptions() {return ResponseEntity.ok().build();}
}

4.3 动态允许源

@Bean
public CorsFilter corsFilter() {return new CorsFilter(new UrlBasedCorsConfigurationSource() {@Overridepublic CorsConfiguration getCorsConfiguration(HttpServletRequest request) {CorsConfiguration config = new CorsConfiguration();String origin = request.getHeader("Origin");if (allowedOrigins.contains(origin)) { // 检查是否在允许列表中config.addAllowedOrigin(origin);config.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE","OPTIONS"));config.setAllowedHeaders(Arrays.asList("*"));config.setAllowCredentials(true);}return config;}});
}

选择哪种解决方案取决于具体需求、安全要求和部署环境。生产环境中推荐使用Nginx反向代理或API网关方案，开发环境中可以使用代理或后端CORS配置。