Прокси-запросы от клиента реагируют приложение на сервер с помощью create-реагировать-приложение и веб-сервер разработчика

Question

Попытка создать серверный API для клиентского приложения. Клиент написан полностью по реакции. В разработке обслуживается через webdevserver через порт 3000. Сервер прослушивает порт 3001. Я добавил прокси к package.json Файл клиентского приложения выглядит следующим образом:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "superagent": "^3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001/"
}

но как только я запрашиваю API сервера, он не работает:

import Request from 'superagent';

export function searchTasks(text, callback) {
  Request.get('http://localhost:3000/api/v1/tasks', response => {
    callback(response.body.Search);
  })
}

Объект ответа является нулевым. Если я пытаюсь запросить API с портом 3001 - все работает нормально. Кажется, web-dev-server не проксирует запросы или, может быть, я пропустил некоторые дополнительные параметры конфигурации?

Answer 1

Причина, по которой вам это не удается, заключается в том, что вы используете superagent делать ваши запросы. superagent отправляет неправильно Accept заголовок для create-react-app прокси для правильной работы. Согласно комментариям в create-react-app документация, настройка прокси использует некоторую эвристику, чтобы иметь дело с тем, что следует отправлять в API истории, а что - с прокси.

Вы можете исправить это проще всего, добавив .accept('json') по вашему запросу. Это сделано так:

import Request from 'superagent';

export function searchTasks(text, callback) {
  Request.get('http://localhost:3000/api/v1/tasks')
    .accept('json')
    .end(response => callback(response.body.Search));
}

Другой способ заключается в использовании fetch API. Вы можете прочитать больше об этом (и как его заполнить для старых браузеров) в документации.