在前端开发中，使用 axios 作为 HTTP 客户端是非常常见的。但是在使用 axios 发送请求时，经常会遇到打不开链接、跨域等问题。这时候可以使用代理，将请求发送到代理服务器，然后由代理服务器转发请求到目标服务器。而 npm 包 axios-proxy-fix 就是为了解决这个问题而存在的。
什么是 axios-proxy-fix
axios-proxy-fix 是一个 axios 的请求代理扩展。使用它可方便地在 axios 发送请求时设置代理访问。它可以让我们更加轻松地进行局域网内的跨域请求，也可以用于需经过中间代理服务器访问互联网的企业内部系统。
安装
可以使用 npm 安装 axios-proxy-fix，在命令行下输入以下命令：
npm install --save axios-proxy-fix
或者，也可以使用 yarn 安装：
yarn add axios-proxy-fix
使用
首先，在代码中引入 axios-proxy-fix：
import axios from 'axios'; import axiosProxy from 'axios-proxy-fix';
在需要发送请求之前（例如在组件的 created 钩子函数中），设置 axios 的默认全局参数和 axiosProxy 扩展：
-- -------------------- ---- ------- ---------------------- - ------------------------- -- ---- ------- ---------------------------------------------- - ------- - - ------------------------------ -- ---- ------ ----------------- - ------ - ----- ------------ -- --------- ----- ----- -- ---------- -- ---展开代码
这里的 proxy 配置对象中的 host 和 port 分别代表代理服务器的地址和端口号。我们可以根据实际情况进行修改。
然后，就可以使用 axios 进行请求了。例如：
axios.get('/users').then(response => { console.log(response.data); }).catch(error => { console.error(error); });
当 axios 发送请求时，将会自动使用我们设置的代理服务器进行转发。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---------- ---- ------------------ -- -- ----- -------- ---------- -- ---------------------- - ------------------------- ---------------------------------------------- - ------- - - ------------------------------ ----------------- - ------ - ----- ------------ -- --------- ----- ----- -- ---------- -- --- -- --------- --------------------------------- -- - --------------------------- -------------- -- - --------------------- ---展开代码
总结
axios-proxy-fix 是一个非常实用的 axios 扩展，可以帮助我们方便地进行请求代理。在使用时，我们需要进行一些简单的配置，然后就可以使用 axios 进行请求了。值得一提的是，使用 axios-proxy-fix 进行代理时，我们也可以使用其他的代理服务器软件，例如 Fiddler。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a181e8991b448dfd13
