React Proxy error: не удалось прокси-запрос / api / с локального хоста: от 3000 до http://localhost:8000 (ECONNREFUSED)

Question

У меня есть интерфейс React, который использует jwt для аутентификации с помощью Django. Бэкэнд работает и прекрасно подключается с использованием представлений django, но когда я пытаюсь прокси-запрос от React, он выдает ошибку Connection Refused.

Ошибка прокси: не удалось запросить прокси / api / auth / token / получить / с локального хоста: от 3000 до http://localhost:8000 (ECONNREFUSED).

Подключение к http://localhost:8000/api/auth/token/obtain/ работает нормально. И отправка запроса POST с Axios также работает нормально и возвращает маркер json. Но когда я передаю его через узел, он не работает.

По моему package.json у меня есть:

  "proxy": {
    "/api/*":  {
      "target": "http://localhost:8000"
    }
  },

Редактировать: Публичное репо . Вы можете легко запустить, если у вас установлен докер. (использует 1 изображение и 2 контейнера). После клонирования просто запустите docker-compose build, затем docker-compose up.

Edit2: Заголовки запроса:

*General*
Request URL: http://localhost:3000/api/auth/token/obtain/
Request Method: POST
Status Code: 500 Internal Server Error
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade

*Response Headers*
HTTP/1.1 500 Internal Server Error
X-Powered-By: Express
Date: Mon, 30 Apr 2018 21:23:17 GMT
Connection: keep-alive
Transfer-Encoding: chunked

*Request Headers
POST /api/auth/token/obtain/ HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 45
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Content-Type: application/json
Accept: */*
Referer: http://localhost:3000/login
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr;q=0.8,ja;q=0.7

Answer 1

Таким образом, проблема заключалась в том, что и среда Node dev, и среда Django dev работали в отдельных контейнерах докеров, поэтому localhost ссылался на контейнер узла, а не на мостовую сеть.

Таким образом, ключом было использование контейнерных ссылок, которые автоматически создаются при использовании docker-compose, и использование их в качестве имени хоста. Поэтому я изменил его на

"proxy": {
    "/api":  {
        "target": "http://django:8000"
    }
},

И это сработало, пока вы запускаете оба контейнера с помощью одной и той же команды docker-compose, в противном случае вам придется вручную указывать external_links в вашем файле docker-compose.yml.

Answer 2

Если вы пользуетесь более новой версией CRA 2.0+, вам нужно будет сделать это через прокси-сервер. https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

Answer 3

Я тоже столкнулся с той же проблемой. В большинстве результатов поиска упоминается добавление "secure": false или "ignorePath": true в конфигурацию прокси. Примерно так:

"proxy": {
    "/api/*":  {
      "target": "http://localhost:8000",
      "secure": false
    }
  },

Возможно, стоит попробовать, но, к сожалению, у меня ничего не вышло. Хотя каждый адрес (http://localhost:3000 и http://localhost:8000) отлично работает в браузере, возможно, поскольку контейнер на самом деле проксирует, ему нужно использовать адрес Docker?

EDIT -

Хорошо, думаю, я понял это. Я полагаю, что это имеет отношение к связи контейнера с контейнером. В вашем docker-compose ваш сервер API называется django. Измените файл package.json следующим образом:

"proxy": {
    "/api/*":  {
      "target": "http://django:8000",
      "secure": false
    }
  }