如果是不考虑跨域问题,那么请求后台数据使用的就是该路径。但是根据同源策略,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即可