Question

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

我还有默认的create-react-app设置，可以使用端口3000启动应用程序。我想从我的api中获取数据并在我的反应应用程序中使用它来渲染它。我收到错误，因为交叉原始请求无法检索数据。这通常如何在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"
  }
}

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

2 个答案: