proxyjs教程（如何用nodejs设置proxy进行https请求）

在Web项目中，有时需要通过协议调取来自其他环境的数据。HTTPS是一种应用于安全数据传输的网络协议。我们都知道Ajax可以异步请求数据，但单单通过ajax无法实现跨域。采用一些其他方式需要根据不同的浏览器做相应处理，火狐，谷歌等和IE需要各自做相应判断，所以这种通过浏览器来解析数据虽然省略了数据的解压缩等处理，但是在有安全认证等情况下做跨域处理确比较困难。比如：IE的请求Header无法更改。这时通过Node请求并解析数据就显得比较简单了。如下是nodejs中通过

前面我们介绍了多种请求库，如 urllib、requests、Selenium、Playwright 等用法，但是没有统一梳理代理的设置方法，本节我们来针对这些库来梳理下代理的设置方法。

在本节开始之前，请先根据上一节了解一下代理的基本原理，了解了基本原理之后我们可以更好地理解和学习本节的内容。

另外我们需要先获取一个可用代理，代理就是 IP 地址和端口的组合，就是 : 这样的格式。如果代理需要访问认证，那就还需要额外的用户名密码两个信息。

那怎么获取一个可用代理呢？

使用搜索引擎搜索 “代理” 关键字，可以看到许多代理服务网站，网站上会有很多免费或付费代理，比如快代理的免费 HTTP 代理：

本节代码：https://github.com/Python3WebSpider/ProxyTest

vue3.0监测机制有了很大的改善，弥补了vue2.0 的一些局限：

vue3.0 使用proxy代替了vue2.0版本中的defineProperty，首先利用compositionAPI中的 reactive() 函数返回一个proxy对象，使得数据可监测

target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

baseHandler中定义拦截的get set方法，监测和改写数据，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。

Proxy 与Reflect 组合使用，Proxy拦截用户对目标对象的访问， 而实际对数据的操作由Reflect来完成

Reflect对象与Proxy对象一样，是ES6为了操作对象而提供的新API ，Reflect不能执行new指令。

Reflect作用：优化Object的一些操作方法以及合理的返回Object操作返回的结果。

track() 函数用来收集依赖，将所有 get 的 target 跟 key 以及 effect 建立起对应关系，使用一个全局的 WeakMap 类型变量 targetMap 来存储 target，还需要一个全局的数组来存储 effect

trigger() 函数用来通知订阅者，更新数据，执行effect，普通的effect和computed有优先级，effect先执行，computed后执行，因为 computed 可能会依赖普通的 effect

proxy的兼容性不是很好，由于ES5的限制，ES6新增的Proxy无法被转译成ES5，目前可以通过Polyfill提供部分兼容

https://www.npmjs.com/package/proxy-polyfill

https://www.npmjs.com/package/es6-proxy-polyfill

https://github.com/GoogleChrome/proxy-polyfill

在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下： 1: 配置环境变量 .env.development

2: 配置项目根目录下的vue.config.js 找到devServer

PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为’’ 的话，这样才不会被代理的虚拟path覆盖！

3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字😄）

打开proxy.js

proxy_api 就是你之前在步骤1：中定义的虚拟path VUE_APP_BASE_API_PROXY = ’/proxy-api’ const url = (path) =》 (proxy_api + path) 一个路径处理函数，参数是’/xx/xxx/fetch/list’，return (proxy_api + path)

需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空：

所以不需要在src/utils/request.js 中对代理的请求进行拦截

如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。

至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹’/proxy-api’ 时走额外代理～

进行了上方的配置后，在本地发送的请求会变为

而后可以设置只监听 “/api“ 的代理，不过要设置pathRewrite参数：

本地请求 1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求

2配置我们以知乎日报为例，配置两个代理。一个代理内容，另一个代理图片。在项目根目录，配置proxy.js：//代理const在此也非常感谢大家对脚本之家网站的支持！

　　在有XSS.JS（持久型或非持久型）的网站上嵌入 监控脚本 ，这样的脚本可以动态生成一个iframe，并可控制iframe的location值。 监控脚本 控制iframe加载同域下的其它文档，且DOM安全允许 监控脚本 抓取、修改这些被加载进来的文档里的值（因为它们都在严格同域下）。接着，我们有一个控制端，可以通过这个 监控脚本 与victim进行实时交互与双向通信.

前端ui项目启动后，调用后端接口，报500，将接口在地址改为服务器的ip后验证后接口是正常的。

gateway 上部署了多个server，比如api-user ,api-auth ,api-iips 调用的api-iips接口需要通过网关gateway（172.16.101.224:9200）转发到api-iips server方可。

接口转发-需要将

更多相关内容 https://github.com/chimurai/http-proxy-middleware

最近在使用vue-cli搭建项目的过程中，遇到了跨域请求数据的问题，这里贴出我的解决方法，希望对大家有所帮助。

什么是跨域请求：

如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

这里，数据请求用的是vue-resource(目前vue官方是推荐使用axios)，安装插件：

npm install--save-devvue-resource

1

在main.js中引入插件：

importVueResourcefrom’vue-resource’

Vue.use(VueResource)

这里，解决跨域使用的是

然后，修改config/index.js :

dev:{env:require(’./dev.env’),    port:8080,    proxyTable: {’/api’: {        target:’http://m.maizuo.com/v4/api’,        changeOrigin: true,        pathRewrite: {’^/api’:’’}      }    }  }

这里的target同上面的一样，然后’/api’和’^/api’代表的就是这个根目录地址；

然后，在页面中具体的调用为：

this.$http.get(’api/billboard/home’).then((response) =》 {

});这里，url的值为api + 中的部分 ;

然后，我们就解决了vue中的跨域问题 ;

这里，贴一下http-proxy-middleware插件的github地址，看更多用法 :

https://github.com/chimurai/http-proxy-mid

API就是应用程序接口，CMP4的API用来提供给插件或页面脚本进行调用，以达到对CMP4进行控制的目的通过API，可以读取或设置CMP4的相关属性，可以调用部分方法，可以绑定一些事件进行侦听等等CMP4支持API的地方：（1），全局配置中插件plugins和背景backgrounds，自定义频谱mixer_src，还包括logo，video_image，lrc_image（2），皮肤中的5个窗口背景src