react配置多个代理,跨域

1 react porxy 只代理一个

修改package.json文件
新增

"proxy":"http://172.19.5.35:9536",

  "name": "wangguan",
  "version": "0.1.0",
  "private": true,
  "proxy":"http://172.19.5.35:9536",

2 react porxy 代理多个

  "name": "wangguan",
  "version": "0.1.0",
  "private": true,
  "proxy":{
    "/api": {
        "target": "http://172.19.5.35:9536",
        "ws": true
      },
  "/apc": {
        "target": "http://179.19.5.35:9536",
        "ws": true
      }
  },

报错:提示只支持string类型,不支持object

"proxy" in package.json must be a string.

解决方案

新版react16.6中 create-react-app升级版(webpack4.0) 配置http请求跨域问题
但在最新的create-react-app v2升级版(webpack4.0)中，如果proxy不是字符串，并不能这么在 package.json直接配置，会报错！

通过查阅create-react-app的官方文档https://facebook.github.io/create-react-app/docs/getting-started，找到了如下的解决方案。

 1）：安装http-proxy-middleware管理包，cnpm http-proxy-middleware --save

2）：在项目目录src/下新建setupProxy.js文件，然后写入如下代码:

const proxy = require(‘http-proxy-middleware‘);

module.exports = function(app) {
  app.use(proxy(‘/api‘, { 
       target: ‘http://192.168.1.144:8181‘ ,
       secure: false,
       changeOrigin: true,
       pathRewrite: {
        "^/api": "/"
       },
       // cookieDomainRewrite: "http://localhost:3000"
    }));
};

官网文档
Proxying API Requests in Development

安装http-proxy-middleware

复制文档

Note: this feature is available with react-scripts@2.0.0 and higher.

If the proxy option is not flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware.
You can use this feature in conjunction with the proxy property in package.json, but it is recommended you consolidate all of your logic into src/setupProxy.js.

First, install http-proxy-middleware using npm or Yarn:

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

Next, create src/setupProxy.js and place the following contents in it:

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

module.exports = function(app) {
  // ...
};

You can now register proxies as you wish! Here's an example using the above http-proxy-middleware:

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

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

我的src/setupProxy.js

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

module.exports = function(app) {
  // ...You can now register proxies as you wish!
  app.use(proxy('/api', { 
    target: 'http://172.19.5.35:9536',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
     "^/api": "/"
    },
   }));
   app.use(proxy('/apc', { 
    target: 'http://172.19.5.34:9531',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
     "^/apc": "/"
    },
   }));
  //app.use(proxy('/apc', { target: 'http://172.19.5.34:9531' }));
};

测试成功

123.png

相关代码
axios拦截设置
request.js文件

import axios from 'axios'
import {Toast} from 'antd-mobile';  

//创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 200000, // 请求超时时间
  withCredentials: true // 选项表明了是否是跨域请求
})
service.interceptors.request.use(config => {
  Toast.loading('加载中',1)              // loading组件，显示文字加载中，自动关闭延时1s
  console.log('request go');
  return config;
}, err => {
  console.log('请求失败')
  return Promise.reject(err)
})
//拦截响应
service.interceptors.response.use(config => {
  Toast.hide()                             // 销毁Toast组件
  console.log('response get')
  return config;
}, err => {
  console.log('响应失败')
  return Promise.reject(err)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    /**
    * code为非000000是抛错 可结合自己业务进行修改
    */
    const res = response.data
    if (res.code !== '000000') {
      console.log("response",res)
      res.code = res.data.code
       res.message = res.response.data.msg
      Toast.info(res.code+res.message, 2);
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    return Promise.reject(error)
  }
)
export default service

批量接口
src/axios/pay.js

import fetch from '../utils/request'
// 1根据订单id获取订单信息
export function getOrderById( data) {
  return fetch({
   // baseURL:"http://172.19.5.34:9531",
   // url: '/getOrderById',
    url: '/apc/getOrderById',
    method: 'post',
    data,
  })
}
// 2.获取商户支持的支付方式
export function queryByOwenerIdAndOwnerType( params) {
  return fetch({
    url: '/api/productSubscribe/queryByOwenerIdAndOwnerType',
    method: 'get',
    params,
  })
}

页面调用

import React, { Component } from 'react';
import {List ,Radio,Button} from 'antd-mobile';
import './payChoose.less';
// using ES6 modules
import { BrowserRouter, Route, Link } from 'react-router-dom'
import {getOrderById,queryByOwenerIdAndOwnerType} from '../../axios/pay'

const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;


class pay  extends Component {
  state={
    amount:0,
    coursewareName:''
  }
  requestList = ()=>{
   console.log("requestList")
   let data ={
    "orderId":"527850648009699328"
  }
   getOrderById(data).then(res=>{
     console.log("res=",res)
     const data  =  res.data
     console.log("data=",data)
     if(res.data){
      this.setState({
          amount:data.amount,
          coursewareName:data.coursewareName
      },()=>{
          
      })
// 第二个接口
      let ownerId =data.ownerId
      let ownerType =data.ownerType
      let params={
        ownerId:ownerId,
        ownerType:ownerType
      }
      queryByOwenerIdAndOwnerType(params).then(res=>{
        if(res.data){
          let data = res.data.data
        }
      })
     }
     console.log("data=",data)
   }).catch(error=>{
     console.log("error",error)
   })


  }

  componentDidMount(){
    this.requestList();
  }
  render() {
    return (
     
  );
  }
}

export default pay;