长沙高端网站建设服务器,网站自己优化,西安有没有网站建设和营销的培训,辽宁网站备案原创/朱季谦 在前后端分离的分布式架构中#xff0c;跨域是一道无法绕过去的门槛#xff0c;众所周知#xff0c;生产环境上解决跨域最便捷的方式是使用Nginx来处理#xff0c;那么#xff0c;在本地开发环境又该如何处理呢#xff1f; React框架里处理跨域问题#xff…原创/朱季谦 在前后端分离的分布式架构中跨域是一道无法绕过去的门槛众所周知生产环境上解决跨域最便捷的方式是使用Nginx来处理那么在本地开发环境又该如何处理呢 React框架里处理跨域问题可以使用http-proxy-middleware库解决。 http-proxy-middleware可实现全局设置将客户端请求转发到目标服务器从而实现代理服务器功能进而解决模块化前端跨域访问的问题。 本文基于SpringBootReact环境进行说明。 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版本的引用方式是 1 const proxyrequire(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代理来进行解决跨域问题。
