尝试为客户端应用程序创建服务器端API。客户端完全依赖于反应。在开发中使用端口3000上的webdevserver服务。服务器正在侦听端口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没有代理请求,或者,我错过了一些额外的配置选项?
答案 0 :(得分:2)
这对您失败的原因是因为您正在使用superagent
来处理您的请求。 superagent
为Accept
代理发送错误的create-react-app
标头以使其正常工作。根据{{3}}中的注释,代理设置使用一些启发式方法来处理应该发送到历史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));
}
另一种方法是使用create-react-app
documentation API。您可以在文档中阅读有关它的更多信息(以及如何为旧版浏览器对其进行填充)。