Spring+React前后端分离项目中跨域问题的完美解决方案

最新推荐文章于 2025-06-29 10:58:06 发布

原创最新推荐文章于 2025-06-29 10:58:06 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

J2EE 专栏收录该内容

125 篇文章

订阅专栏

本文介绍了解决SpringBoot+React项目中的跨域问题的三种方法：前端配置代理、后端添加CORS支持及使用Nginx作为代理服务器。重点介绍了如何通过后端配置允许所有源、方法和头部来实现跨域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

springboot+react前后端分离项目中，跨域问题必然存在，解决方案有三种类型:
1、前端解决：
在package.json中添加如下代码:

{
  "name": "myproject1",
  "version": "0.1.0",
  "private": true,
  **"proxy": "http://localhost:9090",**
  "dependencies": {
    "antd": "^3.0.3",
    "fetch": "^1.1.0",
    "flux": "^3.1.3",
    "react": "^15.4.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "reqwest": "^2.0.5"
  }
}

缺点：由于域名部分是固定的，无法解决跨多个网站请求资源的跨域;
2.后端解决方案:
2.1、参考文章；
2.2、原理:添加SpringMVC底层实现的Web配置适配器,增加CORS相关的配置信息;

package com.spring.boot.gp4zj.webconfig;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class CORSConfiguration extends WebMvcConfigurerAdapter
{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowedHeaders("*");
    }
}