Axios(React)上的Post表单数据

ki1q1bka 于 2022-11-05 发布在 iOS

关注(0)|答案(2)|浏览(287)

我在React中有以下组件：

const login = async (username, password) => {
    const response = await axios.post('/auth/jwt/login', {
        username,
        password
    });
    const {accessToken, user} = response.data;

    setSession(accessToken);

    dispatch({
        type: 'LOGIN',
        payload: {
            user,
        },
    });
};

现在，问题是我的API需要一个表单，而这个请求在主体上发送了一个json，因此我得到了一个422错误（不可处理的实体）。
我尝试过创建FormData（）对象，但至今没有成功：

const formData = new FormData();

    const login = async () => {
    const response = await axios.post('/auth/jwt/login', {
        username: formData.username,
        password: formData.password
    });
    const {accessToken, user} = response.data;

    setSession(accessToken);

    dispatch({
        type: 'LOGIN',
        payload: {
            user,
        },
    });
};

有人能帮帮我吗？谢谢！

axios

来源：https://stackoverflow.com/questions/73557420/post-form-data-on-axios-react

2条答案

按热度按时间

yv5phkfx1#

具体来说，您希望将数据POST为application/x-www-form-urlencoded，而不是JSON编码的主体。根据the documentation，在浏览器中，您将使用URLSearchParams执行此操作。例如：

const params = new URLSearchParams();
params.append('username', username);
params.append('password', password);
const response = await axios.post('/auth/jwt/login', params);

(That相同的文档还提供了其他选项，包括第三方库或从NodeJS POST。以上是特定于没有第三方库的浏览器内代码。）

赞(0）回复(0）举报 2022-11-05

xmjla07d2#

前面的解决方案对我不起作用。下面的解决方案：

const form = new FormData();
    form.append('username', username)
    form.append('password', password)
    const response = await axios.post('/auth/jwt/login', form,
        { headers: { 'Content-Type': 'multipart/form-data' } }
    );

事实上我可以这样做：

const login = async (username, password) => {
    const response = await axios.post('/auth/jwt/login', {
        username,
        password
        },
        { headers: { 'Content-Type': 'multipart/form-data' } }
    );
    const {accessToken, user} = response.data;

    setSession(accessToken);

    dispatch({
        type: 'LOGIN',
        payload: {
            user,
        },
    });
};

赞(0）回复(0）举报 2022-11-05

我来回答

Axios(React)上的Post表单数据

2条答案

相关问题

热门标签

最新问答