详解如何在nuxt中添加proxyTable代理

前端之家收集整理的这篇文章主要介绍了详解如何在nuxt中添加proxyTable代理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

背景

在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码

build/dev-server.js

这里是采用的express中间件的形式,使用的依赖是http-proxy-middleware

nuxt也有中间件的概念,不过这个中间件不是express的中间件,那么我们怎么添加到nuxt里面去呢?

怎么做

首先,安装依赖

然后在根目录创建一个文件server.js

// proxy api requests这里就是添加的proxyTable中间价的设置了
var proxyTable = config.dev.proxyTable
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context,options))
})
app.use(nuxt.render)//这里是添加nuxt渲染层服务的中间件

app.listen(3000)
console.log('Server is listening on http://localhost:3000')

然后在nuxt.config.js中添加如下代码

然后node server.js运行就可以了。

觉得运行不方便还可以把命令添加到package.json文件里。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/31086.html

猜你在找的JavaScript相关文章