Запрос на кросс-браузер сервера Webpack и Node

Question

Я новичок, чтобы реагировать и использовать приложение create-response-app в качестве отправной точки. У меня есть api, который возвращает данные json. Я запускаю свой api, используя сервер узлов на порту 3000.

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

Ниже мой код, но я бы по существу хочу, чтобы сделать вызов, как: NodeFetch('/api/jobs'), чтобы получить доступ возвращаемых данных из моего апи на порт 3001.

Вот мой код:

import React from 'react' 
import NodeFetch from 'node-fetch' 

class NodeFetchData extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     jobs: [] 
    }; 
    } 


    componentDidMount() { 

    NodeFetch('http://codepen.io/jobs.json') 
    .then(res => { 
     this.setState({ jobs:res.data.jobs }); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <ul> 
      {this.state.jobs.map(job => 
      <li key={job.hashid}>{job.company_name}</li> 
     )} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default NodeFetchData; 

Answer 1

Я смог получить эту работу, просто добавив прокси-строку в свой пакет package.json. Затем я стартовал сервером в отдельном терминале. Теперь я пытаюсь понять, как запускать как сервер api, так и клиентское приложение для реагирования.

{ 
    "name": "scrap", 
    "version": "0.1.0", 
    "private": true, 
    "proxy": "http://localhost:3001/", 
    "devDependencies": { 
    "react-scripts": "0.7.0" 
    }, 
    "dependencies": { 
    "foreman": "^2.0.0", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

Answer 2

Для дальнейшего использования, при использовании Webpack вы должны иметь в виду разницу между тестирования кода разработки локально и развертывания приложения в производственной среде.

Приведенный выше, поскольку в режиме «разработки» Webpack заботится о том, чтобы обслуживать приложение локально, но когда дело доходит до вашей производственной среды, все, что должен сделать Webpack, - это упаковать ваше приложение React.js в комплекте, который в свою очередь, обслуживается фактическим HTTP-сервером.

С учетом предыдущего, в вашем конкретном случае у вас возникают проблемы с локальным тестированием кода разработки, из-за разницы портов между сервером и API (3000/3001).

Вы хотите, чтобы убедиться, что вы используете относительные маршруты при выборке, так что:

NodeFetch('http://localhost:3001/api/jobs.json')

становится:

NodeFetch('/api/jobs.json')

И в вашем WebPack конфигурации вы хотите используйте строку proxy следующим образом:

proxy: { 
    '/api': { 
     target: 'http://localhost:3001', 
     secure: false 
    } 
    } 

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

Webpack and CORS - Demystifying Cross-server Communications in React.js

Она включает в себя версию контролируемой Hello World образец с решениями ошибок CORS в средах разработки и уместной конфигурацией Webpack, которая придерживается стандартных стандартов приложений React.js, готовых к производству.