简介
在前端开发中，我们通常需要调用后端接口来获取数据，但是在本地开发的时候，由于跨域的限制，我们无法直接调用接口。这时，我们就需要使用代理工具来解决跨域的问题。
在 Vue.js 项目中，我们可以通过 Vue CLI 提供的代理功能来实现。而在 Nuxt.js 项目中，我们可以使用 nuxtjs/proxy 这个 npm 包。
本文将详细介绍该 npm 包的使用方法以及注意事项。
安装
首先，在你的 Nuxt.js 项目中安装 @nuxtjs/proxy：
npm install @nuxtjs/proxy
进入 nuxt.config.js 文件，在 modules 中添加 "@nuxtjs/proxy"：
module.exports = {
modules: [
'@nuxtjs/proxy'
]
}配置
在 nuxt.config.js 文件中，添加 proxy 字段：
-- -------------------- ---- -------
-------------- - -
-------- -
---------------
--
------ -
------- -
------- -------------------------
------------ -
------- - ---
-
-
-
-解释一下这段代码：
proxy表示开启代理'/api'表示接口的前缀target表示接口的真实地址pathRewrite表示重写路径，上面的配置表示将/api替换成/，也就是说，我们在请求接口的时候只需要写/api，不需要写完整的地址。
使用
在项目中发起请求时，只需将请求地址写为 /api/products 即可。例如：
async created() {
const products = await this.$axios.$get('/api/products')
console.log(products)
}这样，我们就成功地使用了 @nuxtjs/proxy 这个 npm 包。
小结
本文介绍了 npm 包 @nuxtjs/proxy 的基本使用方法，以及如何在 Nuxt.js 项目中解决跨域问题。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a679a403f2923b035c08c