Axios将数据发布到客户端域，而不是服务器域

Question

api.js文件

import axios from 'axios';
export const signIn = formData => axios.post('/auth/signin', formData);
export const signUp = formData => axios.post('/auth/signup', formData);

客户端中的package.json

{
...
"proxy": "http://localhost:5000"
}

这里的问题是，每当我从api.js调用方法时，请求都会发送到localhost:3000，这就是我的客户端运行的地方。相反，我希望将请求发送给代理。我不知道我打算做的事情是否可能？

Answer 1

是的，这也是可能的。

基本上，会发生以下情况：如果对URL发出请求，而该URL不是由React应用程序本身维护的，那么该请求将是"；重定向"；指向代理中提到的URL。

确保React应用程序本身没有/auth/signin和/auth/signup路由。

区分API URL的一个常见惯例是在它们前面加上/api。

从而使得API的URL为：/api/user/signIn或/api/user/profile。

此外，我假设您已经使用Create React App设置了React应用程序。如果没有，则需要在webpack config中设置proxy变量。

现在，要接受网络呼叫，您的后端需要启用CORS。