本地构建小项目，用到api请求服务（也会涉及到一个跨域请求的问题），需要 proxy pass ……

Karsuo
449 阅读2分钟

[本文参考地址来至 Jason_hu 工作日志 2015/04/15 12:11 my.oschina.net/jdragon/blo…)

利用nodejs中http-server组件的proxy参数来联调前端和后端 模拟proxy代理

  • 比如：我们前端请求api, 不能写死url:"http://10.10.10.10:7000", 因为这个IP随时会改，又或者各个测试环境的不同下对应的服务器也不同（分SIT,UAT,PRO）
  • 我们需要通过nginx去 代理请求 /api …… ……
前端：调用接口
 $.ajax({
    url: "/api/draw/m",
    content: "application/json"
})

服务器自行配置nginx:
location /api {
    proxy_pass http://TEST01:7000/api;
    …… …… ……
}

在服务器 ./etc 文件夹下，有个hosts文件，自行cat它，往里面添加映射关系
10.10.10.10     TEST01

添加好后记得重启下nginx这样才会生效
  • 我们本地项目的目录结构如下: 主要内容都在src目录下
./src
	./css
	./js
	index.html
  	demo.html
package.json

http-server 是nodejs框架中的一个工具，本身是使用javascript编写的 安装 npm install http-server -g

  • 刚开始我以为以为用vscode打开项目，直接 npx http-server 就能跑起来（这样是不行的），应该 cd src 再 npx http-server才能跑起来（我本地的src目录结构。index什么的都在src下）
  • 上面那步骤走完， /api/draw/m 会报404路径不对，当然因为我们本地还没配置 该请求的URI转发给另外一个web服务器处理，以达到proxy代理的目的
  • npx http-server 适合不需要proxy代理这样

http-server -P 启动，带-P参数 ，启动完后你可以用 http://127.0.0.1:8080 访问你的页面

  • 首先 server的测试环境已经部署在某个test服务器 比如：http://testserver/api 或者你知道具体的IP地址 http://10.10.10.10:7000
  • P参数的目的，是当http-server发现请求地址本地不存在的时候，会将该请求的URI转发给另外一个web服务器处理，收到结果后，以本地服务器来响应给请求方，以达到proxy代理的目的
cd src 执行 http-server -P "http://testserver" 或者 http-server -P "http://10.10.10.10:7000"
  • http-server -P 完后每当你执行当前页调用 api 时你就会看到vscode控制台会出现这个工具下的一些列log
[Sat Nov 28 2020 21:27:56 GMT+0800 (GMT+08:00)]  "GET /api/draw/m" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
[Sat Nov 28 2020 21:28:12 GMT+0800 (GMT+08:00)]  "GET /api/draw/m" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习

avatar
文章
阅读
粉丝