在前端开发中，我们通常需要通过接口请求获取数据或者与服务器进行交互。然而，由于浏览器的同源策略限制，跨域请求是不被允许的。这就导致了很多开发者在开发过程中遇到了跨域问题。而 npm 包 cors-proxy 是一个可以帮助我们解决跨域问题的工具。
1. 什么是 cors-proxy？
cors-proxy 是一个基于 Node.js 和 Express 开发的 npm 包，它可以作为一个代理服务器将跨域请求转发到目标服务器，并且在响应头中添加 Access-Control-Allow-Origin 字段，从而绕过浏览器的同源策略限制。
2. 如何使用 cors-proxy？
第一步：安装 cors-proxy
npm install -g cors-proxy
第二步：启动 cors-proxy 服务
cors-proxy
第三步：访问 cors-proxy 接口
以访问百度首页为例，如果我们直接在浏览器中访问 https://www.baidu.com，则会因为跨域请求被阻止。但是如果我们使用 cors-proxy，只需要将请求地址修改为 http://localhost:1337/https://www.baidu.com，即可通过代理服务器实现跨域请求。
在代码中使用 cors-proxy：
const url = 'http://localhost:1337/https://www.baidu.com'; fetch(url) .then(res => res.text()) .then(body => console.log(body)) .catch(err => console.error(err));
3. cors-proxy 的进阶用法
除了上述基本使用方式，cors-proxy 还有一些高级功能可以满足更多的需求。
3.1 自定义代理地址
如果默认的 http://localhost:1337 不适合你的项目需求，你可以通过命令行参数来指定自己的代理地址：
cors-proxy --address 127.0.0.1 --port 8080
3.2 配置代理服务器超时时间
如果请求响应时间过长，我们可能需要设置一个超时时间以避免长时间等待无响应。可以通过命令行参数来配置：
cors-proxy --timeout 5000
3.3 修改响应头信息
默认情况下，cors-proxy 会向响应头中添加 Access-Control-Allow-Origin 字段，但是你也可以在命令行参数中设置其他字段参数：
cors-proxy --headers "Access-Control-Allow-Origin: *, X-Custom-Header: Value"
3.4 自定义路由规则
默认情况下，cors-proxy 只支持 GET 和 POST 请求方法，如果你需要使用其他请求方法或者修改请求路径，可以通过编写自定义路由规则实现：
-- -------------------- ---- ------- ----- ----- - ---------------------- -------------------- ----------- - -- ----------- --- ----- -- --------------------------- - ------ - ----- ----------------------------- ----- -------- ------- ----------- -------- ----------- -- - - --------------- -- -- ------------------ ------ -- -----------展开代码
4. 总结
cors-proxy 是一个非常实用的工具，可以帮助我们解决前端开发中的跨域问题。通过本文的介绍，我们了解了 cors-proxy 的基本用法以及一些高级功能，相信能够对大家在日常开发中遇到的跨域问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56582
