axios请求与proxy代理配置

       如果是不考虑跨域问题，那么请求后台数据使用的就是该路径。但是根据同源策略，3000端口（前端页面端口）无法访问5000端口（后台数据端口），此时就需要使用proxy代理配置了。 

/**
* 获取所有的用户信息
*/
getUserData = () => {
    axios.get('http://localhost:5000/users').then(
        res => { 
            console.log(res.data) 
        },
        err => { 
            console.log(err) 
        }
    )

}

     在src文件夹中新建文件setupProxy.js添加配置，项目进行启动的时候会自动遍历到这个文件并加入webpack中。

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

module.exports = function(app){
	app.use(
		proxy('/api',{                        //遇见/api前缀的请求，就会触发该代理配置
			target:'http://localhost:5000',   //请求转发给谁
			
            // 如果没有手动设置为true，该属性默认为false
            // 在本文中false状态下服务端获取到的Host请求来自于3000端口
            // true状态下Host请求来自于5000端口
            // 成功欺骗到了服务器 :)
            changeOrigin:true,                //控制服务器收到的请求头中Host的值
            
            // 在请求路径中加上了/api的路径触发代理    
            // 但是在后端访问路径中没有/api/xxx的说法
            // 所以需要在请求触发后将/api的路径删掉即改为空字符串
			pathRewrite:{'^/api1':''}         //重写请求路径
		})，

        // 在use中可以设置多个proxy代理
        proxy('/api2',{ 
            xxxx 
        }),
        proxy('/api3',{ 
            xxxx 
        })
    )
}

 分析：

首先还是简要介绍下代理配置的实现原理 

     如果没有代理，客户端可以向服务端发起请求，但是根据同源策略无法接收到返回的数据，最后导致数据请求失败。

     其实代理可以理解为3000端口的中间商，注意，和客户端一样也是开在3000端口。该端口既开着一个脚手架的终端提供前台编写，同时也开着一个非常微小的服务器。因此客户端直接将请求发送给代理，代理直接将请求转发给服务端（服务器之间数据的获取不会受到跨域影响，产生跨域问题的本质是ajax引擎拦截了响应），因此服务端直接将数据返回给了代理。最后端口同为3000的代理可以成功将数据返回给客户端。

接下来讨论具体的配置以及路径设置方法 

    在添加了代理后，所有向3000端口中发送的【本地没有的资源】请求都会转发给5000端口，因此我们可以将请求路径做一个修改，改为’http://localhost:3000/api/users‘。需要注意这句话里的黑体内容，如果请求路径是’http://localhost:3000/api/index.html‘，返回的结果就会是public目录下的index.html文件，代理只会转发【本地public文件夹中没有的资源】

--------------------------更新---------------------------------

现在好像会出现proxy is not a function的报错

应该是版本更新问题，将proxy替换为createProxyMiddleware即可