从 Nuxt.js 到外部 API 的 axios post 请求有问题

Question

我现在已经尝试了很多小时，以便向我在 Nuxt 工作的外部 api 发送一个简单的 post 请求。

它在 单独的节点实例 中按预期工作，我可以 POST 并根据需要使用以下内容获取：

const headers = {
  'Content-Type': 'application/json',
  'access-token': 'myTokenXYZ123'
};
const data = { test: 'Hello!' };

const postSomething = () => {
  axios.post('https://myapidomain.com/api', data, {
    headers: headers
  });
};
postSomething();

还有 curl:

curl -X POST -H 'access-token: myTokenXYZ123' -H 'Content-Type: application/json' -d '{ "test": "Hello!" }' https://myapidomain.com/api

到目前为止一切顺利，现在我想在我的 Nuxt 项目中实现它。我必须先设置一个 http 代理，我在 nuxt.config.js 中是这样设置的：

[...]

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    '/my-api/': { target: 'https://myapidomain.com/api', pathRewrite: {'^/my-api/': ''} },
  },
  axios: {
    proxy: true
  },

[...]

我非常有信心代理可以正常工作，因为我可以使用以下方法获取数据：

methods: {
  async getSomething() {
    let requested = await this.$axios.get('/my-api/', {
       headers: this.headers
    });
    return requested.data;
  }
}

但是无论我做什么，POST 请求都不起作用。我就是这样尝试的：

methods: {
  postSomething() {
    const data = { test: 'Hello!' };

    this.$axios.post('/my-api/', data, {
      headers: {
        'Content-Type': 'application/json',
        'access-token': 'myTokenXYZ123'
      }
    });
  }
}

我尝试了各种不同的格式，例如像这样：

methods: {
  postSomething() {
    const headers = {
      'Content-Type': 'application/json',
      'access-token': 'myTokenXYZ123'
    };
    const data = { test: 'Hello!' };
    const options = {
      method: 'post',
      url: '/my-api/',
      data: data,
      transformRequest: [(data, headers) => {
        return data;
      }]
    };
    this.$axios(options);
  }
}

但是好像不行。请求是运行并在一段时间后中止，终端出现以下错误：

ERROR  [HPM] Error occurred while trying to proxy request  from localhost:3000 to https://myapidomain.com/api (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

其他一些我已经尝试过的东西：

运行 API 和本地 Nuxt
使用在模板中导入的 axios 作为 nuxt 模块
来自构建和生产版本的请求
异步和同步方法

重现步骤：

# Download and start API server
git clone https://github.com/consuman/api-demo.git
cd api-demo/
npm install
node src

# In a second terminal download and start Nuxt server
git clone https://github.com/consuman/api-demo-nuxt.git
cd api-demo-nuxt
npm install
npm run dev

# Navigate to http://localhost:3000
# Relevant code is in /api-demo-nuxt/pages/index.vue

要测试，如果 API 正常工作，您可以 POST 使用 curl:

curl -X POST -H 'access-token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjaGVjayI6dHJ1ZSwiaWF0IjoxNTg2MTYzMjAxLCJleHAiOjE2MTc2OTkyMDF9.vot4mfiR0j6OewlJ0RWgRksDGp-BSD4RPSymZpXTjAs' -H 'Content-Type: application/json' -d '{ "testData": "Hello from API, posted from curl, please overwrite me!" }' http://localhost:3001/api

感谢您的阅读。任何提示将不胜感激！

Answer 1

希望您正在使用 @nuxtjs/axios 模块，如果是，那么您可以使用拦截器

https://axios.nuxtjs.org/helpers.html#interceptors

export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = `Bearer token`;
  })

  $axios.onError(error => {
    if(error.response.status === 500) {
      redirect('/sorry')
    }
  })
}

这样你就可以共享你的 axios 代码了。

关于您的 post 请求，您能否分享更多详细信息或任何有效示例！！！

Answer 2

我找到问题了。配置了一个服务器中间件，不再需要了。它在每个 POST 请求时触发。

愚蠢的错误，但这就是你的学习方式，对吧？ xD

重现的步骤现在是一个工作演示，以防任何人需要类似的东西。

干杯！

这里又是工作演示：

# Download and start API server
git clone https://github.com/consuman/api-demo.git
cd api-demo/
npm install
node src

# In a second terminal download and start Nuxt server
git clone https://github.com/consuman/api-demo-nuxt.git
cd api-demo-nuxt
npm install
npm run dev

# Navigate to http://localhost:3000
# Relevant code is in /api-demo-nuxt/pages/index.vue

Answer 3

如果您在 nuxt 中使用 axios 时遇到问题。确保您可以通过导入或上下文访问 axios 本身。

import axios from "@nuxtjs/axios";
const res = await axios.post('/api/v1/auth', {email, password });

或上下文

// For methods and vuex, you have access to 'this'
const res = await this.$axios.$post('/api/v1/auth', {email, password });

// For nuxt middleware, you have access to 'context'
const res = await context.$axios.$get('/api/v1/user');

包括headers

this.$axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

最后，确保您正在控制台记录服务器端点（中间件和路由）以确保您正确地访问了所有内容。

Answer 4

在我的例子中，我将触发按钮放在表单中。这触发了函数（我称之为 axios）调用以及通常在您发送 From 时发生的 XHR 调用。

为了修复它并只触发 axios 调用，只需将按钮从 Form 标签上取下即可。

从 Nuxt.js 到外部 API 的 axios post 请求有问题

Problem with axios post request from Nuxt.js to external API

javascript

http-post

node.js

axios

nuxt.js