解决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             // //localhost:4000/ 地址只是示例,实际地址以项目为准
 9             target: '//127.0.0.1:8081',
10             // 跨域时一般都设置该值 为 true
11             changeOrigin: true,
12             // 重写接口路由
13             // pathRewrite: {
14             //     '^/admin': '',// 这样处理后,最终得到的接口路径为: //localhost:8080/xxx
15             // }
16         })
17     );
18     
19       app.use(
20         '/admin/example',
21         createProxyMiddleware({
22             target: '//127.0.0.1:8080',
23             changeOrigin: true,
24         })
25     );
26 }

 

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

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

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

 

1.0.0之后的版本引用方式:

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

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

 

1 server:
2   port: 8081
3   servlet:
4     context-path: /api
5     

 

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