时间戳

首页 > 解决方案 > axios 将数据发布到客户端域而不是服务器域

reactjs - axios 将数据发布到客户端域而不是服务器域

问题描述

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我的客户端正在运行的位置。相反，我希望将请求发送到代理。我不完全知道我打算做的事情是否可能？

标签： reactjsexpressreduxreact-reduxaxios

解决方案

是的，同样是可能的。

基本上，会发生以下情况：如果对 URL 发出请求，并且该 URL 不由 React App 本身维护，那么该请求将被“重定向”到代理中提到的 URL。

确保 React App 本身没有/auth/signinand/auth/signup路由。

区分 API URL 的常用约定是在它们前面加上/api.

因此，使 API 的 URL 为:/api/user/signIn或/api/user/profile.

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

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

推荐阅读