Java與前端交互出現(xiàn)跨域問(wèn)題的14種解決方案

更新時(shí)間：2025年04月16日 09:13:25 作者：黑碼小帥

跨域問(wèn)題是前端與后端分離開(kāi)發(fā)中的常見(jiàn)挑戰(zhàn),這篇文章為大家整理了14個(gè)常見(jiàn)的解決方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1 前端解決方案( 開(kāi)發(fā)環(huán)境代理)

1.1 Webpack開(kāi)發(fā)服務(wù)器代理

// 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請(qǐng)求)

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callback}`;
  document.body.appendChild(script);
}
 
// 后端需要返回類似 callbackName(data) 的響應(yīng)

1.4 WebSocket

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

1.5 修改瀏覽器安全策略 (僅開(kāi)發(fā)環(huán)境)

Chrome啟動(dòng)參數(shù)：--disable-web-security --user-data-dir=/tmp/chrome

2 后端解決方案

2.1 Spring框架解決方案

2.1.1 使用@CrossOrigin注解

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*") // 允許所有來(lái)源
public class MyController {
    // 控制器方法
}

2.1.2 全局CORS配置

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

2.1.3 過(guò)濾器方式

@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特定配置

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
# 預(yù)檢請(qǐng)求緩存時(shí)間
cors.max-age=3600

2.3 Spring Security解決方案

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            // 其他安全配置
            .csrf().disable(); // 通常需要禁用CSRF以簡(jiǎn)化API開(kāi)發(fā)
    }
    
    @Bean
    CorsConfigurationSource 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 生產(chǎn)環(huán)境解決方案

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 高級(jí)方案

4.1 基于Token的跨域認(rèn)證

// 后端添加響應(yīng)頭
response.setHeader("Access-Control-Expose-Headers", "Authorization");
response.setHeader("Authorization", "Bearer " + token);

4.2 預(yù)檢請(qǐng)求(OPTIONS)處理

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

4.3 動(dòng)態(tài)允許源

@Bean
public CorsFilter corsFilter() {
    return new CorsFilter(new UrlBasedCorsConfigurationSource() {
        @Override
        public 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;
        }
    });
}

選擇哪種解決方案取決于具體需求、安全要求和部署環(huán)境。生產(chǎn)環(huán)境中推薦使用Nginx反向代理或API網(wǎng)關(guān)方案，開(kāi)發(fā)環(huán)境中可以使用代理或后端CORS配置。

以上就是Java與前端交互出現(xiàn)跨域問(wèn)題的14種解決方案的詳細(xì)內(nèi)容，更多關(guān)于Java跨域問(wèn)題解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: