Webpack 和 Node 服务器跨浏览器请求

Question

我是新来的反应并使用 create-react-app 作为起点。我有一个返回 json 数据的 api。我使用端口 3000 上的节点服务器运行我的 api。

我还有默认的 create-react-app 设置，它使用端口 3000 启动应用程序。我想从我的 api 获取数据并在我的 react 应用程序中渲染它。我收到由于跨源请求而无法检索数据的错误。这通常在 webpack 中如何处理？

下面是我的代码，但我本质上想进行如下调用：NodeFetch('/api/jobs') 以访问在端口 3001 上运行的我的 api 返回的数据。

这是我的代码：

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

为了将来参考，在使用 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 错误的解决方案，以及一个符合通用生产就绪 React.js 应用程序标准的固执己见的 Webpack 配置。

Answer 2

只需在我的 package.json 中添加一个代理行，我就可以让它工作。然后我在一个单独的终端中由服务器启动。我现在正试图弄清楚如何启动 api 服务器和 react 客户端应用程序。

{
  "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"
  }
}