从 Nuxt.js 到外部 API 的 axios 发布请求出现问题

我现在尝试了好几个小时,从 Nuxt 向我的外部 api 发送一个简单的发布请求。


它可以从单独的节点实例按预期工作,我可以根据需要使用以下内容进行 POST 和 GET:


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



DIEA
浏览 474回答 4
4回答

不负相思意

如果您在 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');包括标题this.$axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;最后,确保您正在控制台记录服务器端点(中间件和路由),以确保您正确处理所有内容。

红颜莎娜

希望你使用@nuxtjs/axios模块,如果是的话,你可以使用拦截器https://axios.nuxtjs.org/helpers.html#interceptorsexport default function ({ $axios, redirect }) {  $axios.onRequest(config => {    config.headers.common['Authorization'] = `Bearer token`;  })  $axios.onError(error => {    if(error.response.status === 500) {      redirect('/sorry')    }  })}这样您就可以共享您的 axios 代码。关于您的帖子请求,您能否分享更多详细信息或任何工作示例!!!

largeQ

我发现了问题。配置了一个服务器中间件,不再需要了。它在每个 POST 请求时触发。愚蠢的错误,但这就是你学习的方式,对吧?xD重现的步骤现在是一个工作演示,以防有人需要类似的东西。干杯!这是工作演示:# Download and start API servergit clone https://github.com/consuman/api-demo.gitcd api-demo/npm installnode src# In a second terminal download and start Nuxt servergit clone https://github.com/consuman/api-demo-nuxt.gitcd api-demo-nuxtnpm installnpm run dev# Navigate to http://localhost:3000# Relevant code is in /api-demo-nuxt/pages/index.vue

慕村9548890

就我而言,我将触发按钮放在表单中。这触发了函数(我称之为 axios)调用以及通常在您发送 From 时发生的 XHR 调用。为了修复它并且只触发 axios 调用,只需从 Form 标签上取下按钮。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript