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

前端开发 作者: 2024-08-22 13:55:01
在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht
1 $ npm install --save-dev http-proxy-middleware
 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: true12              重写接口路由
13              pathRewrite: {
14                  '^/admin': '',// 这样处理后,最终得到的接口路径为: http://localhost:8080/xxx
15              }
16         })
17     );
18     
19       app.use(
20         '/admin/example'21 22             target: 'http://127.0.0.1:8080'23             changeOrigin: 24 25 26 }
  1 const proxy=require('http-proxy-middleware');
const {createProxyMiddleware}=require('http-proxy-middleware');
1 server:
2   port: 8081
3   servlet:
4     context-path: /api
5     
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66699.html