Reactjs,在使用axios进行post请求时出现CORS错误



我使用的是React.js 18版本。歌珥所面临问题的一段代码,使用axios post请求。故意不放post请求的原始URL。在代码下面附加API响应截图文件。

我得到响应在邮差,但不是在浏览器(CORS)。我从我的同事那里知道,这个API是在PHP上构建的,根据后端家伙的说法,他那边的事情很好。
我把这段代码在这里知道我们在前端做错了什么?我们从昨天起就被困在这里了。请帮助!

控制台响应:https://i.stack.imgur.com/HbUjq.png网络响应:https://i.stack.imgur.com/6xycq.png网络响应:https://i.stack.imgur.com/5cjey.png邮差回复:https://i.stack.imgur.com/MxyDT.png

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import './App.css';
function App() {
const [CaseDetail, setCaseDetail] = useState([]);
const getCaseDetail = async () => {
const casedetail = {schemeNameDratDrtId:'1',casetypeId:'1',caseNo:'1',caseYear:"2020"}; 
await axios.post('URL', casedetail,
{
headers: {"Access-Control-Allow-Origin": "*"}
} 
)
.then((result) => {
setCaseDetail(result.data.data)
})
}
useEffect(() => {
getCaseDetail();  
}, []);
console.log(CaseDetail)
return (
<div className="App">
<h2>Welcome to Home Page</h2>
</div>
);
}
export default App;

您的服务器应该启用跨域请求,而不是客户端。要做到这一点,您可以检查这个带有多个平台的实现和配置的漂亮页面

这是浏览器的安全问题。如果您使用postman获得200,这意味着问题是浏览器阻止了它。尝试再次使用API测试网站,如:"reqbin.com",如果工作,后端家伙应该修复头问题。我希望这对你有帮助。

一些可能有帮助的事情:

  1. 我得到响应在邮差,但不是在浏览器(CORS) -这是正常的CORS问题。

  2. fetach和axios请求之间可能存在差异。检查fetach是否有效。如果是,检查

Axios失败歌珥但取回没问题

  1. 如果您需要在头中发送令牌,请确保axios发送它

如何设置标题和选项在axios?

相关内容