Axios 适用于 GET，但不适用于 POST 和 DELETE？

Question

我有一个让我非常困惑的问题。我在 React 中创建了 Web 应用程序，并在 Mulesoft 4 中创建了 REST API。由于我无法解决的 CORS 问题，我在 package.json 文件中添加了代理，并且 GET 请求一切正常。但是现在，我正在尝试执行 POST 或删除请求，但它不起作用。实际上，当我尝试在后端进行调试时，它不会"命中"我的API路由。下面我将向您展示我的代码，所以我希望您能帮助我。

这是我的package.json文件：

{
"name": "erp-apoteka",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8081/api/",
... 
}

这是我的 axios 删除代码：

export const deleteKategorija = (kategorijaId: number) => {
return axios.delete(`/kategorije/${kategorijaId}`);
};

和邮政：

export const postKategorija = (requestData: Kategorija) => {
return axios.post<Kategorija>('/kategorije', {
naziv: requestData.naziv,
opis: requestData.opis,
});
};

当我尝试登录控制台时，我的响应显示删除： 在此处输入图像描述

当我尝试登录控制台时，我对 Post 的响应显示我就像空白对象： 在此处输入图像描述

Answer 1

你能试试这个我调用 POST api 调用的例子吗？希望对您有所帮助。

下面是代码沙盒。请打开网络选项卡以检查呼叫响应后，您将在"网络"选项卡下获得成功响应。

这是代码：

import React, {useState, useEffect} from 'react';
import axios from 'axios';
function PostCreate() {
const [post, setPost] = useState({});
const handleChange = ({target}) => {
const {name, value} = target;
setPost({...post, [name]: value});
console.log(post);
};
const handleSubmit = async e => {
e.preventDefault();
const createData = async () => {
try {
const response = await axios.post(`https://jsonplaceholder.typicode.com/posts`, {
method: 'POST',
body: JSON.stringify({
title: post.title,
body: post.body,
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json));
console.warn(response.data);
} catch (error) {
console.warn(error);
}
};
createData();
};
return (
<div className='container'>
<div className='row'>
<div className='col-4'>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="name">Title</label>
<input type="text" name='title' value={post.title} onChange={handleChange}
className="form-control" id="title"/>
</div>
<div className="form-group">
<label htmlFor="position">Body</label>
<input type="text" name='body' value={post.body}
onChange={handleChange} className="form-control" id="body"/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
)
}
export default PostCreate;