解决分布式React前端在开发环境的跨域问题

在前后端分离的分布式架构中，跨域是一道无法绕过去的门槛，众所周知，生产环境上解决跨域最便捷的方式是使用Nginx来处理，那么，在本地开发环境又该如何处理呢？

React框架里处理跨域问题，可以使用http-proxy-middleware库解决。

http-proxy-middleware可实现全局设置，将客户端请求转发到目标服务器，从而实现代理服务器功能，进而解决模块化前端跨域访问的问题。

本文基于SpringBoot+React环境进行说明。

1.前端下载依赖

1 $ npm install --save-dev http-proxy-middleware

2.在src目录下新建setupProxy.js文件

1 const { createProxyMiddleware } = require('http-proxy-middleware');

2 module.exports = function(app) {

3// /api 表示代理路径

4//target 表示目标服务器的地址

5    app.use(

6         '/api/system',

7        createProxyMiddleware({

8             // http://localhost:4000/ 地址只是示例，实际地址以项目为准

9             target: 'http://127.0.0.1:8081',

10             // 跨域时一般都设置该值 为 true

11             changeOrigin: true,

12             // 重写接口路由

13             // pathRewrite: {

14             //     '^/admin': '',// 这样处理后，最终得到的接口路径为： http://localhost:8080/xxx

15             // }

16        })

17    );

18    

19      app.use(

20         '/admin/example',

21        createProxyMiddleware({

22             target: 'http://127.0.0.1:8080',

23             changeOrigin: true,

24        })

25    );

26 }

这里需要注意一点是，在http-proxy-middleware的1.0.0之前的版本与之后的版本，两者对模块引引用是存在差别的，如：

0.x.x版本的引用方式是：

 1const proxy=require('http-proxy-middleware');

1.0.0之后的版本引用方式：

 1const {createProxyMiddleware}=require('http-proxy-middleware');

该前端对应的后端设置如下：

1server:

2  port: 8081

3  servlet:

4    context-path: /api

5

按照以上设置，即可实现本地开发环境解决跨域问题，当然，这里只适合在开发环境进行开发时设置，若发布到生产上后，最好方式是通过nginx代理来进行解决跨域问题。