首先在src文件夹下新建文件

src/setupProxy.js

2.在setupProxy.js中引入内置库

//react 脚手架内置的库 
const proxy =require('http-proxy-middleware')
module.exports = function(app){
    app.use(
        proxy('/api1',{//预见/api1前缀的就会触发该代理配置
            target:"http://localhost:5001",//请求转发给谁
            changeOrigin:true,//控制服务器收到的请求头中host字段的值  来自 5001端口了
            pathRewrite:{'^/api1':""} //重写请求路径 只要带有/api1开头的路径才会走这个代理
        }),
        proxy('/api2',{
            target:"http://localhost:5002",
            changeOrigin:true,
            pathRewrite:{'^/api2':""}
只有路径中命中/api1或者/api2的时候才会走代理
可以配置多个代理
请求服务器资源需要加前缀来表述
 app.use可以传入多个proxy对象
 proxy第一个参数是路径标识，第二个参数是个对象
 修改完之后，重启react项目。
                    react配置代理的两种方式1.在package.json中配置"proxy":"http://localhost:5001"注意：proxy的value值只能是字符串的形式axios访问的时候不需要加前缀不能配置多个代理只有访问资源不在当前端口时才会访问代理端口的资源2.新建setupProxy.js文件首先在src文件夹下新建文件src/setupProxy.js2.在setupProxy.js中引入内置库//react 脚手架内置的库 const proxy =re
优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
在package.json中追加如下配置：
  "xxx": {},
  ......
  "proxy":"https://www.duitang.com/category/"
发送axios请求：
axiox.get('http://localhost:
				
react项目跨域（webpack+axios）
react项目跨域（webpack+axios）
遇到一个需求：要去访问内网里另一个域名的后端接口，比如https://www.aaa.com的域名去访问http://www.bbb.com。
一开始是这样写的
  axios({
    method: 'GET',
    url: 'http://www.bbb.com/user/xiaoming',
    data: {
      StaffSn: '4927493',
近日来，连续高压的做项目，都没时间来写点东西，今天浏览帖子时发现好多同学在问proxy使用pathRewrite重写路径时不生效的问题，一时兴起就想写篇文章告诉还不清楚的同学们。
概述前端打包工具
由于近些年来react、vue等MVVM框架的流行，使得前端的打包工具更倾向于webpack，相比传统的打...
				
最近有不少伙伴询问react的代理配置，自己也去试验了一下发现不少的坑，在这就将所遇到的坑和心得分享出来，希望能帮到更多的伙伴，避免踩坑。
1、 直接在package.json中设置proxy属性
这个是在用create-react-app脚手架搭建的react项目中的，可以直接在package.json中配置proxy：
有些文章里会提示以下方式
  "proxy": {
    "/api/*...
				
1.安装http-proxy-middleware，会生成config和scripts文件夹，
在config/path.js中存在  proxySetup: resolveApp(‘src/setupProxy.js’)，proxySetup是在webpackDevServer.config.js中
npm install http-proxy-middleware -D
2.暴露配置文件
npm run eject
3.在src下面新建setupProxy.js文件
const {
				
react 跨域配置（proxy——单向跨域代理配置、http-proxy-middleware——接口转发器）
一、单向跨域代理（所有请求发向于同一个http地址）
在package.json文件中使用proxy配置可以解决单向跨域问题
	"proxy":{
		"/api":{
		"target":"http://m.kugo.com",
      				"cha...
//在src下创建配置文件：src/setupProxy.js
//编写setupProxy.js配置具体代理规则：
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/runner', {  
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  app.use(
    proxy("/api", {
      target: <代理地址>,
      changeOrigin: true, // ne.