时间戳

首页 > 解决方案 > Nuxt 静态生成页面和 axios post

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

问题描述

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

我尝试在 nuxt.config.js 中使用代理和直接查询，但最终部署到 ngnix 后，没有任何效果。

请帮忙。

更新。重现步骤。

proxy: { '/api': { target: 'http://example.com:9000', pathRewrite: { '^/api': '/', }, }, changeOrigin: true, },

结果，它不是对 进行 POST 调用hosting.com/api/email/subscribe，而是调用localhost:3000/api/email/subscribe.

标签： vue.jsaxiosnuxt.js

解决方案

一定要在你的项目 @nuxt/axios和@nuxtjs/proxy中安装nuxt版本的axios和proxy

之后在你的 nuxt.config.js 中添加 axios 作为模块加上 axios 和代理的这个选项：

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    //more modules if you need
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    proxy: true,
    // See https://github.com/nuxt-community/axios-module#options
  },

  proxy: {
    '/api/': {
      target: process.env.AXIOS_SERVER, // I use .env files for the variables
      pathRewrite: { '^/api/': '' }, //this should be your bug
    },
  },

现在你可以像这样在代码的任何部分使用 axios

const result = await this.$axios.post('/api/email/subscribe', {email: email})

它将在内部解决而AXIOS_SERVER/email/subscribe不会导致 cors 问题。

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

您可以为 dev 配置 .env ，为生产配置 .env.prod ，然后在本地使用yarn build && yarn start您的生产环境测试您的应用程序。您只需要在 nuxt.config.js 文件的顶部添加它

const fs = require('fs')
const path = require('path')

if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
  require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
  require('dotenv').config()
}

推荐阅读