Приложение Nuxt не может получить доступ к одному REST API, но все остальные работают - PullRequest
Новая
       5

Приложение Nuxt не может получить доступ к одному REST API, но все остальные работают

0 голосов
/ 24 мая 2018

У меня есть веб-приложение с бэкэндом Django и внешним интерфейсом NuxtJS, работающее в докере.Бэкэнд использует REST framework JWT Auth для управления доступом.Мой файл URL выглядит следующим образом: 

urlpatterns = [
path('api/auth/login/', obtain_jwt_token),
path('api/auth/verify/', verify_jwt_token),
# other urls here
]

Docker-compose.yml 

version: '3'

services:
  backend:
    build: ./backend
    env_file:
     - deploy.env

    volumes:
      - .:/backend
    expose:
      - "8000"

  nginx:
    image: nginx:latest
    container_name: ng01
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/backend
      - ./nginx:/etc/nginx/conf.d
    depends_on:
      - backend

  web:
    build: ./web
    ports:
      - "80:3000"
    links:
      - backend

Эти два метода отлично работают с почтальоном, когда работает докер-контейнер - я могу получитьи проверьте токены JWT, как ожидалось.Тем не менее, когда интерфейс вызывает эти методы , метод входа в систему по-прежнему работает отлично, но метод проверки завершается ошибкой .В моем приложении есть ряд других методов, которые также отлично работают при вызове из внешнего интерфейса.Вот ошибка, которую я получаю: 

Error: connect ECONNREFUSED 127.0.0.1:8000

Я нахожу это действительно странным, так как обычно это сообщение подразумевает какую-то проблему с CORS, но поскольку другие методы работают, я не понимаю, как это может бытьслучай здесь.

Вот как я вызываю API входа / проверки из моего внешнего интерфейса (в моем файле store.js).Всякий раз, когда пользователь обновляет страницу, nuxtServerInit извлекает токен из cookie-файла браузера и пытается вызвать метод verify для получения профиля пользователя во внешнем интерфейсе 

export const actions = {
  async refreshAuth ({ dispatch, commit }, token) {
    try {
      var { data } = await axios.post(endpoint + '/auth/verify/', { token })
      console.log(data)
      if (data.token) {
        commit('setUser', { token: data.token, profile: data.profile })
      }
    } catch (err) {
      console.error('refreshAuth failed due to an error')
      console.log(err)
    }
  },
  async nuxtServerInit ({ dispatch, commit }, { req }) {
    if (req.headers.cookie) {
      let { token } = cookie.parse(req.headers.cookie)
      await dispatch('refreshAuth', token)
    }
  },
async login ({ commit }, { email, password }) {
    try {
      var { data } = await axios.post(endpoint + '/auth/login/', { email, password })
      await commit('setUser', {
        token: data.token,
        profile: data.profile
      })
    } catch (err) {
      if (err.response.status === 401) {
        commit('setError', 'Invalid credentials')
      }
      if (err.response.status === 403) {
        commit('setUnverified', true)
      }
    }
  }
}

1 Ответ

0 голосов
/ 24 мая 2018

Оказывается, это была проблема с CORS.Действие login вызывалось с пустой страницы, тогда как вызов refreshAuth выполнялся с nuxtServerInit.Странно, django-cors-headers отклоняет вызов, когда совершено nuxtServerInit.Решением было переместить вызов на refreshAuth в метод created() макета по умолчанию в nuxt

...