Настройка setupProxy.js с использованием http-proxy-middleware - PullRequest
Новая
       16

Настройка setupProxy.js с использованием http-proxy-middleware

0 голосов
/ 21 января 2019

Я пытаюсь настроить прокси-сервер (setupProxy.js) в приложении create-реагировать, используя HTTP-proxy-middleware, чтобы получить доступ к API данных о погоде (api.darksky.net).

Я выполнил действия, описанные в документации React (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually), но все еще имею проблемы с CORS.

Я пытался добавить свой URL-адрес API в вызове извлечения с помощью 'https://cors -anywhere.herokuapp.com / ' (https://github.com/Rob--W/cors-anywhere/), и это работает, но это немного банально для меня, и я бы предпочел, чтобы это работало самостоятельно.

Вот функция, которая в конечном счете вызывается из componentDidMount: 

  fetchWeatherDataAuto = () => {
    let lat = this.state.locInfo.lat;
    let lon = this.state.locInfo.lon; 

    fetch(`https://api.darksky.net/forecast/${apiKey.darkSky_key}/${lat},${lon}`)
      .then(response => response.json())
      .then(response => console.log("Weather Response: ", response));
  }

Вот код, который является моим файлом setupProxy.js: 

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy("/forecast", {
          target: "https://api.darksky.net/",
          changeOrigin: true
    }));
}

Эта ошибка отображается в моей консоли:

Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение> удаленного ресурса в> https://api.darksky.net/forecast/{myAPIKey}/9.739>9056,-82.8484079. (причина: отсутствует заголовок CORS ‘Access-Control-Allow-Origin’>).

1 Ответ

0 голосов
/ 21 января 2019

Нет необходимости устанавливать собственный прокси в этом случае ...

Просто добавьте это в свой package.json: 

{
  "name": "test1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "proxy": "https://api.darksky.net", // <= add this here...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Тогда в вашем App.js 

  componentDidMount() {
    fetch(`/forecast/${YOUR_API_KEY_HERE}/${lat},${lon}`)
      .then(response => response.json())
      .then(response => console.log('Weather Response: ', response));
  }

И это должно работать ... (обратите внимание, что все асинхронные вызовы должны выполняться в методе жизненного цикла componentDidMount ...)

...