axios请求与proxy代理配置

11次阅读
没有评论

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

 分析:

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

axios请求与proxy代理配置

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

     其实代理可以理解为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即可

神龙|纯净稳定代理IP免费测试>>>>>>>>天启|企业级代理IP免费测试>>>>>>>>IPIPGO|全球住宅代理IP免费测试

相关文章:

版权声明:代理IP2022-11-25发表,共计1479字。
新手QQ群:570568346,欢迎进群讨论 Python51学习