[英]How to use webpack dev proxy with Nuxt
Using Nuxt to develop a universal JS app, I'm attempting to configure webpack's dev proxy so that, in development only , requests to /api
get proxied to http://127.0.0.1:500/api
where they'll reach a Python REST API.使用Nuxt开发通用 JS 应用程序,我正在尝试配置webpack 的开发代理,以便仅在开发中,对
/api
请求被代理到http://127.0.0.1:500/api
那里他们将到达 Python REST API。 Following the Nuxt docs, I've extended the webpack config in nuxt.config.js
like so:按照 Nuxt 文档,我在
nuxt.config.js
扩展了 webpack 配置, nuxt.config.js
所示:
build: {
extend (config, { isDev }) {
// Proxy /api to Python only in dev
if (isDev) {
const devServer = {
proxy: {
'/api': 'http://127.0.0.1:5000'
}
}
config.devServer = devServer;
}
}
}
If I log the config, I see that change being applied:如果我记录配置,我会看到正在应用更改:
...
devServer: { proxy: { '/api': 'http://127.0.0.1:5000' } } }
...
Yet, when I visit http://127.0.0.1:8080/api/things , my Nuxt app is returned (it runs on port 8080 in dev), indicating that the webpack dev proxy is not catching the /api
path and performing the proxying.然而,当我访问http://127.0.0.1:8080/api/things 时,我的 Nuxt 应用程序被返回(它在 dev 中的端口 8080 上运行),表明 webpack dev 代理没有捕获
/api
路径并执行代理。 Just to confirm that the proxy destination is working, if I visit http://127.0.0.1:5000/api/things , I get the expected API response.只是为了确认代理目的地正在工作,如果我访问http://127.0.0.1:5000/api/things ,我会得到预期的 API 响应。 Why, when I've extended the Nuxt webpack config to enable the webpack dev proxy, does the proxy not function?
为什么,当我扩展 Nuxt webpack 配置以启用 webpack 开发代理时,代理不起作用?
I have, however, had success with the @nuxt/proxy module, but critically, I could not find a way to make it only affect development and not production.然而,我在@nuxt/proxy模块上取得了成功,但关键的是,我找不到一种方法让它只影响开发而不影响生产。 That portion of
nuxt.config.js
looked like this: nuxt.config.js
那部分看起来像这样:
axios: {
proxy: true
},
proxy: {
'/api': 'http://127.0.0.1:5000'
},
I'm happy to use the @nuxt/proxy module instead of (on top of?) the webpack dev proxy if it can be made to work in development only.如果只能在开发中使用,我很高兴使用 @nuxt/proxy 模块而不是(在上面?)webpack 开发代理。
I needed to do this and was able to solve this using the following in nuxt.config.js我需要这样做并且能够在 nuxt.config.js 中使用以下内容解决这个问题
export default {
// other config ...
...process.env.NODE_ENV === 'development' && {
proxy: {
'/api': 'http://localhost:8000',
}
},
}
This code will only add the proxy key in the nuxt config if we're doing a development build.如果我们正在进行开发构建,此代码只会在 nuxt 配置中添加代理密钥。
Reference to the syntax used to insert the conditional object field (this was previously unknown to myself): https://stackoverflow.com/a/51200448引用用于插入条件对象字段的语法(这是我以前不知道的): https : //stackoverflow.com/a/51200448
Ugh, I'm barking up the wrong tree.呃,我叫错了树。
Nuxt needs to proxy, even in production.即使在生产中,Nuxt 也需要代理。 When my initial request is processed and the app is server-side-rendered, any API requests need to be proxied because the Node server is doing the calling, not a browser, so those API requests won't even hit my production router like nginx or HAProxy (which typically does my routing for
/
and /api
to the appropriate services).当我的初始请求被处理并且应用程序在服务器端呈现时,任何 API 请求都需要被代理,因为 Node 服务器正在执行调用,而不是浏览器,因此这些 API 请求甚至不会像 nginx 那样命中我的生产路由器或 HAProxy(通常将
/
和/api
路由到适当的服务)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.