Проблема с топором ios после запроса от Nuxt. js к внешнему API - PullRequest
Новая
       76

Проблема с топором ios после запроса от Nuxt. js к внешнему API

0 голосов
/ 05 апреля 2020

Я уже много часов пытаюсь получить простой пост-запрос к моему внешнему API, работающему с Nuxt.

Он работает, как и ожидалось, от экземпляра отдельного узла , я могу 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

  • Использование ax ios, импортированного в шаблон и в виде модуля nuxt

  • Запрос из сборочной и производительной версии

  • Asyn c и синхронные методы

Шаги для воспроизведения: 

# 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

Спасибо за чтение. Любая подсказка будет высоко ценится!

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

Я нашел проблему. Было настроено промежуточное программное обеспечение сервера, которое больше не было нужно. Он срабатывает при каждом запросе 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
0 голосов
/ 06 апреля 2020

Надеюсь, вы используете модуль @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')
    }
  })
}

таким образом, вы можете использовать свой топор ios код.

А что касается вашего почтового запроса, можете ли вы поделиться более подробной информацией или любым рабочим примером !!!

...