react配置多个跨域代理

一、直接在package.json中配置跨域代理,只能配置一个

  "proxy": "http://172.16.0.234:8884"

在pakage.json文件中的proxy的值只能是一个字符串,若给proxy的值换成对象则会报错,所以配置多个不同的跨域代理需要其他方法

二、使用插件:http-proxy-middleware

1. 安装插件

npm install http-proxy-middleware 

或者

yarn add http-proxy-middleware

2. 使用

在src目录下创建文件setupProxy.js文件

const proxy = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use(proxy('/api', {
    target: 'http://172.16.0.234:8884/'
  }));
  app.use(proxy('/gpu_data', {
    target: 'http://10.23.27.134:8885',    // 目标服务器 host
    secure: false,
    changeOrigin: false,                         //是否需要改变原始主机头为目标URL默认false,
   }));
}

还有一种用法,解释更为详细

3. 接口代理

export function getOrder( data) {
  return fetch({
    url: '/api/getOrder',          // 实际请求地址 http://172.16.0.234:8884/api/getOrder
    method: 'post',
    data,
  })
}
export function getGpuList( params) {
  return axios.get('/gpu_data/list',params)     // 实际请求地址 http://10.23.27.134:8885/gpu_data/list
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 react porxy 只代理一个 修改package.json文件新增 2 react porxy 代理多个...
    JennyGao66阅读 28,828评论 6 20
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,320评论 0 6
  • 今天自己搭了个react架子,网上找了个公开的接口,结果发现跨域了。因为接口是别人的,我没法让别人在接口上处理跨域...
    lemonzoey阅读 9,970评论 0 9
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 848评论 0 4
  • 2018年10月10日,周三天气:晴心情:不以物喜 不以己悲纪念日:丙子年三月十三起床:5:57就寝:22:55 ...
    杨杨管阅读 221评论 0 2