Vue.js Nuxt静态生成页面和axios post

我有一个Nuxt项目。当我生成一个静态页面时，一切都正常。 但是，我需要向另一台服务器发送POST请求

我尝试在nuxt.config.js中使用代理，只使用直接查询，但最终部署到ngnix后，一切都不起作用

请帮忙

---

更新。复制的步骤

• 创建Nuxt应用程序，包括axios和代理
• 为其他Web服务配置代理：

代理：{
“/api”：{
目标：'http://example.com:9000',
路径重写：{
“^/api”：“/”，
},
},
来源：对，
}，

• 在代码中的某个位置调用此服务：

  const result=wait this.$axios.post（'/api/email/subscribe'，{email:email}）

• 运行“Thread dev”并测试服务。它在本地正常工作

• 运行“nuxt generate”并部署静态代码托管服务，例如hosting.com
• 运行调用上述服务的页面

---

因此，它不会对

hosting.com/api/email/subscribe

进行POST调用，而是调用

localhost:3000/api/email/subscribe

确保在项目中安装axios和代理的nuxt版本，并且

之后，在nuxt.config.js中添加axios作为模块，并为axios和代理添加以下选项：

模块：[
//文件：https://axios.nuxtjs.org/usage
“@nuxtjs/axios”，
//如果需要更多模块
],
/*
**Axios模块配置
*/
axios：{
代理：是的，
//看https://github.com/nuxt-community/axios-module#options
},
代理：{
“/api/”：{
目标：process.env.AXIOS_SERVER，//我使用.env文件作为变量
路径重写：{'^/api/'：''}，//这应该是您的错误
},
},

现在，您可以在类似这样的代码的任何部分中使用axios

const result=wait this.$axios.post（'/api/email/subscribe'，{email:email}）

它将在内部解决AXIOS_服务器/电子邮件/订阅问题，而不会导致cors问题

额外：使用multiples.env文件在本地测试环境

您可以为dev配置.env，为生产配置.env.prod，然后在本地使用

纱线构建和纱线启动

在生产环境中测试应用程序。您只需将其添加到nuxt.config.js文件的顶部

const fs=require（'fs'））
const path=require（'路径'）
if（process.env.NODE_env==='production'&&fs.existsSync（'.env.prod'））{
require（'dotenv'）.config（{path:path.join（\uu dirname，`.env.prod`）}）
}否则{
require（'dotenv'）.config（）
}

确保在您的项目和应用程序中安装axios和proxy的nuxt版本

之后，在nuxt.config.js中添加axios作为模块，并为axios和代理添加以下选项：

模块：[
//文件：https://axios.nuxtjs.org/usage
“@nuxtjs/axios”，
//如果需要更多模块
],
/*
**Axios模块配置
*/
axios：{
代理：是的，
//看https://github.com/nuxt-community/axios-module#options
},
代理：{
“/api/”：{
目标：process.env.AXIOS_SERVER，//我使用.env文件作为变量
路径重写：{'^/api/'：''}，//这应该是您的错误
},
},

现在，您可以在类似这样的代码的任何部分中使用axios

const result=wait this.$axios.post（'/api/email/subscribe'，{email:email}）

它将在内部解决AXIOS_服务器/电子邮件/订阅问题，而不会导致cors问题

额外：使用multiples.env文件在本地测试环境

您可以为dev配置.env，为生产配置.env.prod，然后在本地使用

纱线构建和纱线启动

在生产环境中测试应用程序。您只需将其添加到nuxt.config.js文件的顶部

const fs=require（'fs'））
const path=require（'路径'）
if（process.env.NODE_env==='production'&&fs.existsSync（'.env.prod'））{
require（'dotenv'）.config（{path:path.join（\uu dirname，`.env.prod`）}）
}否则{
require（'dotenv'）.config（）
}

nuxt generate的作用是：构建应用程序并将每个路由生成为HTML文件（用于静态托管）

因此，在这里使用是不可能的。请注意，您的路径甚至没有被重写

可能您要查找的结果不是

hosting.com/api/email/subscribe

（即

/api

），而是

hosting.com/email/subscribe

然而，如果您使用nginx，那么我认为您不应该使用Nuxt的

proxy

选项。Nginx就是为了这个目的而构建的，所以在Nginx配置文件中，只要声明它应该指向的地方就可以了。

nuxt generate的作用是：构建应用程序并将每个路由生成为HTML文件（用于静态托管）

因此，在这里使用是不可能的。请注意，您的路径甚至没有被重写

可能您要查找的结果不是

hosting.com/api/email/subscribe

（即

/api

），而是

hosting.com/email/subscribe

---

然而，如果您使用nginx，那么我认为您不应该使用Nuxt的

proxy

选项。Nginx就是为此而构建的，所以将API调用指向此处，并在Nginx配置文件中声明它应该进一步指向的位置。

请详细说明“什么都不起作用”。您的代码试图做什么？您是否在浏览器控制台中看到任何错误消息？请详细说明“什么都不起作用”。您的代码试图做什么？您在浏览器控制台中看到任何错误消息吗？谢谢，我看到您使用了“纱线构建”和“纱线开始”您尝试过“纱线生成”吗？简单地说，问题只会出现在纱线生成中！您有两个问题，localhost:3000意味着您需要在axios或proxy中配置服务器名称。我的代码解决了这个问题。另一个问题是骗局