【记录】补环境代理(Proxy)方法和 jsdom补环境

【记录】补环境代理(Proxy)方法

js代码

function getEnvs(proxyObjs) {
    for (let i = 0; i < proxyObjs.length; i++) {
        const handler = `{
      get: function(target, property, receiver) {
        console.log("方法:", "get  ", "对象:", "${proxyObjs[i]}", "  属性:", property, "  属性类型:", typeof property, ", 属性值:", target[property], ", 属性值类型:", typeof target[property]);
        return target[property];
      },
      set: function(target, property, value, receiver) {
        console.log("方法:", "set  ", "对象:", "${proxyObjs[i]}", "  属性:", property, "  属性类型:", typeof property, ", 属性值:", value, ", 属性值类型:", typeof target[property]);
        return Reflect.set(...arguments);
      }
    }`;
        eval(`try {
            ${proxyObjs[i]};
            ${proxyObjs[i]} = new Proxy(${proxyObjs[i]}, ${handler});
        } catch (e) {
            ${proxyObjs[i]} = {};
            ${proxyObjs[i]} = new Proxy(${proxyObjs[i]}, ${handler});
        }`);
    }
}
proxyObjs = ['window', 'document', 'location', 'navigator', 'history', 'screen']
getEnvs(proxyObjs);

使用:
报错确实localhost的host
报错确实localhost的host,直接补这个

location = {
    "host": 'xxxx',
}

结果:
在这里插入图片描述
成功生成sign的值

参考链接:https://blog.youkuaiyun.com/andrew_wf/article/details/136255427

jsdom补环境

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCUMENT html><p>Test</p>')
window = dom.window
document = window.document
navigator= window.navigator
### 配置代理环境设置 为了在 JavaScript 中配置代理来处理不同环境下的请求,通常会采用两种方式:一种是在开发环境中利用 HTTP 代理服务器转发特定路径的请求;另一种则是使用 `Proxy` 对象拦截并修改对象操作。 #### 使用 Node.js 创建 HTTP 代理服务器 对于前端项目,在开发阶段可以通过构建工具(如 Webpack Dev Server 或者 Vue CLI 等)内置的功能实现简单的反向代理。然而,如果希望更灵活地控制代理逻辑,也可以借助于 Node.js 来搭建自定义的HTTP代理服务[^1]: ```javascript const http = require('http'); const httpProxy = require('http-proxy'); // 初始化代理实例 const proxy = httpProxy.createProxyServer({}); // 定义目标地址 const targetUrl = process.env.TARGET_URL || 'http://localhost:3000'; // 启动监听端口的服务 const server = http.createServer((req, res) => { try { // 将接收到的所有请求都转发给指定的目标URL proxy.web(req, res, {target: targetUrl}); } catch (err) { console.error(err); res.writeHead(500, {'Content-Type': 'text/plain'}); res.end('Something went wrong.'); } }); server.listen(process.env.PORT || 8080, () => { console.log(`Proxy server is running at ${process.env.HOST || "localhost"}:${process.env.PORT || 8080}`); }); ``` 这段代码展示了如何基于Node.js创建一个简易版的HTTP代理服务器,并允许通过环境变量动态调整目标主机监听端口号。当应用程序运行在这个代理之后时,它所发起的一切对外部资源的调用都会被重定向到设定好的上游API网关处,从而有效规避浏览器的安全策略限制——即所谓的“同源政策”。 #### 利用 ES6 的 Proxy 构造函数增强应用行为 除了上述方法外,还可以考虑运用 ECMAScript 2015 提供的新特性之一 —— `Proxy` ,用于监控并响应某些类型的键入访问尝试或属性赋值动作。这使得开发者能够轻松实现在不影响原有业务流程的前提下加入额外功能的目的,比如日志记录、权限验证或是条件性的路由跳转等[^2]: ```javascript let apiEndpoint = 'https://api.example.com'; if (process.env.NODE_ENV === 'development') { apiEndpoint = 'http://localhost:3000'; // 开发环境下指向本地模拟接口 } const handler = { get(target, propKey){ if(propKey.startsWith('/')){ return `${apiEndpoint}${propKey}`; } return Reflect.get(...arguments); }, }; const proxiedApiBase = new Proxy({}, handler); fetch(proxiedApiBase['/users']) .then(response=>response.json()) .catch(console.warn); ``` 在此示例中,每当试图读取带有斜杠前缀的对象成员名作为相对路径字符串时,就会触发对应的 getter 函数执行,进而返回拼接后的完整 API 地址链接。这种方式不仅简化了多环境切换过程中的繁琐配置工作量,同时也提高了代码可维护性扩展性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值