"proxy":"http://localhost:3001"
,因为我的API服务器在3001端口上运行,但是我使用axios发送请求时,它仍然指向3000端口,请问缺少了什么? 我重启了我的应用程序多次,问题仍然存在。"proxy":"http://localhost:3001"
,因为我的API服务器在3001端口上运行,但是我使用axios发送请求时,它仍然指向3000端口,请问缺少了什么? 我重启了我的应用程序多次,问题仍然存在。在你的 package.json 文件中添加:
"proxy": "http://localhost:3001",
请重新启动您的服务器(后端应用程序)和前端(Create React App)axios.post("/auth/register", userData)
.then(res => console.log(res.data));
上面的示例来自我的环境,并且同样有效。请注意代理仅在开发模式下起作用。
确保您的代码在代理和axios post请求中都使用正确的斜杠
我遇到了一个问题,所有的操作“正确无误”,但是我的GET请求可以通过代理,而POST请求却不行!我得到了一个“请求中止”的错误提示。
后来我偶然发现解决方案——我的data : { key: value}
需要加上双引号,写成data : { "key": value }
。
axios.post("/api/auth/register", userData)
.then(res => console.log(res.data));
注意: 不要使用 http://localhost:3000/api/auth/register
作为请求URI, React服务器将自动代理请求,API请求将从3001端口提供服务。
webpack.dev.js
设置即可。module.exports = merge(common, {
mode: 'development',
devServer: {
host: 'localhost',
port: 3000,
open: true,
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:5000',
secure: false
}
}
},
devtool: 'inline-source-maps'
});
请为您的服务器设置适当的本地主机,并重新启动开发服务器。在“create-react-app”中,webpack配置文件应该位于路径/node_modules/react-scripts/config
,按照上面的代码进行更改,然后重新启动开发服务器,您就可以了解到这条消息。在此路径上有webpack.dev.js
和webpack.prod.js
。
开发服务器只会尝试将其接受标头中没有text/html的请求发送到代理。
因此,任何带有该标头的请求,例如响应单击链接(锚标签)而发送的GET请求将不会被代理。我建议首先查看浏览器开发工具中请求标头的“接受”字段。
我知道这篇文章已经有点旧了,但最近我也遇到了同样的问题。
对我起作用的是使用npm包axios来进行API请求,而不是原生JavaScript fetch API。
我没有深入研究axios和fetch之间有什么不同的请求头,但现在一切都正常工作。
我看到了一个回答,说使用fetch而不是axios可能会导致问题。但这并不正确,问题在于请求/主体不正确(你需要查看你的代码)。
对于所有正在寻找答案的人,请注意,如果您使用creat-react-app创建应用程序并且没有webpack.config.js,则有不同的解决方案。此时,您只需要在package.json中添加代理即可。
正确的fetch请求应该是什么样子:
const options = {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, *same-origin, omit, chosen include to allowed sending cookies
headers: {
'Content-Type': 'application/json',
COOKIE: 'key=value; Path=/; Expires=Thu, 09 Jul 2020 07:20:21 GMT; HttpOnly',
},
body: JSON.stringify({ something }), // body data type must match "Content-Type" header in this case it is json
})
fetch(url, options)
.then(res => {
//return res.json!
return res.json();
})
.then(data => {
// do something with data
})
开发环境的代理设置:
package.json 包含:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
...
...
axios({
method: "post",
proxy: {
host: "localhost",
port: 3001
},
.
.
.
})
...
针对 production环境的代理设置:
在public文件夹中创建一个serve.json文件,并插入以下任何属性之一:
serve.json 包含:
{
"redirects": [
{ "source": "/api", "destination": "http://localhost:3001/" }
]
}
npm install -g serve
serve -s build
我是从create-react-app开始的,然后在Mac OS上添加了Node.js Express服务器。 经过阅读许多解决方案,重启服务器多次,我仍然难以通过代理使其能够获取('/api/hello')。 这是实际适用于我的内容:
更改webpack.config.js
devServer: {
open: true,
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:3001',
secure: false
}
}
},
我重新启动了电脑(这对一些人似乎有效)。后来我发现在webpack.config.js中devServer
被定义了两次...