使用 create-react-app 和 webpack dev server 代理来自客户端的请求将应用程序反应到服务器

Question

正在尝试为客户端应用程序创建服务器端 API。客户端完全是在react上写的。在开发中，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);
  })
}

响应对象为空。如果我尝试使用 3001 端口请求 API - 一切正常。似乎 web-dev-server 没有代理请求，或者，也许，我错过了一些额外的配置选项？

Answer 1

您失败的原因是您正在使用 superagent 来执行您的请求。 superagent 发送错误的 Accept header 以使 create-react-app 代理正常工作。根据 create-react-app documentation 中的评论，代理设置使用一些试探法来处理什么应该发送到历史记录 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。您可以在文档中阅读更多相关信息（以及如何为旧版浏览器填充它）。

使用 create-react-app 和 webpack dev server 代理来自客户端的请求将应用程序反应到服务器

Proxying requests from client react app to server with create-react-app and webpack dev server

javascript

node.js

reactjs

create-react-app

react-fullstack