Nuxt: Прокси VS Асинхронные данные VS Страница перезагрузки

Я создаю приложение nuxt, и у меня возникла проблема с данными прокси и асинхронно.

Это мой nuxt.config (упрощенный)

modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios: {
  proxy: true
},
proxy: {
  '/api': {
    target: 'http://www.example.com',
    pathRewrite: {
      '^/api': '/'
    }
  }
}

Это мой фрагмент кода asyncData (упрощенный):

async asyncData ({ store }) {
  await store.dispatch('fetchData')
}

Код действия магазина fetchData (упрощенный):

async fetchData({ commit }) {
    const response = await myService.fetchData()
    commit('setData', response.data)
}

И, наконец, функция myService (упрощенная):

fetchData () {
    return axios.get('/api/path-to-my-resource')
}

Что ожидается: чтобы служба запускала вызов проксируемой конечной точки в обоих случаях: при посещении страницы по ссылке или при обновлении страницы.

Что происходит: когда я нажимаю кнопку "Обновить" на странице, вместо вызова http://www.example.com/path-to-my-resource, я вижу, что он пытается сделать это на / api / путь / к-моему-ресурсу и, конечно же, не работает. Насколько я понимаю, когда я обновляю страницу, прокси не работает внутри ловушки asyncData.

Я почти уверен, что что-то делаю неправильно, но не могу этого найти. Может ли кто-нибудь указать мне правильное направление?


person Panos Vakalopoulos    schedule 20.01.2020    source источник
comment
Вы решили проблему? Я сталкиваюсь с той же проблемой при использовании обработчиков на стороне сервера (например, asyncData, created и т. Д.). Сервер пытается подключиться к 127.0.0.1/... вместо прокси target и получает ECONNREFUSED 127.0.0.1:80   -  person BurningPapaya    schedule 14.07.2020
comment
да. проблема заключалась в том, что с помощью прокси вы редактировали экземпляр axios для nuxt. используя import axios from 'axios в начале вашего магазина или службы, вы практически используете другой экземпляр axios, который не настроен с помощью прокси. Итак, что я сделал, так это то, что я удалил службу, переместил все вызовы конечных точек в свой магазин и использовал везде this.$axios.xxxx, так что я использую прокси везде.   -  person Panos Vakalopoulos    schedule 16.07.2020


Ответы (1)


Попробуйте что-нибудь вроде:

proxy: {
  '/api/': { target: 'http://www.example.com', pathRewrite: {'^/api/': ''} }
// ^^^^^                                                      ^^^^^^   ^^
// Note the ending slashes.
// And the rewrite rule.
}

Так написаны документы:

person Paul Melero    schedule 21.01.2020
comment
Хотя это не было решением моей проблемы, вы дали мне правильную идею. Действительно, при вызове конечной точки в моем сервисе в URL-адресах указывались косые черты. Но раз уж ВЫ поделились идеей со мной, поехали. Вот мой голос за. - person Panos Vakalopoulos; 21.01.2020