我的JS和HTML是在下面，当我输入这个URL：http://localhost:8080/api/languages/getall，则返回[{"id":1,"name":"c"},{"id":2,"name":"java"}]，
但是下面的代码不起作用，这可能是根本原因，如何修复它？
$.ajax({
url: "http://localhost:8080/api/languages/getall",
type: 'GET',
dataType: 'json', // json?
CORS: true ,
contentType:'application/json',
headers: {
'Access-Control-Allow-Origin': '*',
},
success: function (data){
console.log(data);
}
});超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>How to consume RESTful Web Service using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/consume-rest.js"></script>
</head>
<body>
<div>
<h3>How to consume RESTful Web Service using jQuery</h3>
<p id="id">ID: </p>
<p id="content">Content: </p>
</div>
</body>
</html>Spring
@CrossOrigin(origins = "http://localhost:8080")
@GetMapping("/languages/getall")
List<GetLanguageResponse>getAllResponse(){
return languagesService.getAllResponse();
}//it returns array of objecthttps://pasteboard.co/KZ7BZqMSh7yX.png链接显示了后端服务器的应答。我还在代码上方添加了交叉来源。错误仍然相同，“来源'null'已被CORS策略阻止”和“jquery.min.js：2 GET http：//localhost：8080/api/languages/getall net：：ERR_FAILED”
只是想让你们知道在我的React代码中它是有效的
const App = () => {
const [groups, setGroups] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch('api/languages/getall')
.then(response => response.json())
.then(data => {
setGroups(data);
setLoading(false);
})
}, []);
if (loading) {
return <p>Loading...</p>;
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<div className="App-intro">
<h2>JUG List</h2>
{groups.map(group =>
<div key={group.id}>
{group.name}
</div>
)}
</div>
</header>
</div>
);
}
1条答案
按热度按时间gstyhher1#
首先我们可以说的是，你的API显然返回了一个对象数组，而你试图直接使用
data作为一个对象。另外，你是否尝试console.log(data)来看看会发生什么？我猜你的错误捕捉器从未被触发过？您是否尝试过这些选项？
此外，确保后端发送2xx响应并在后端配置CORS。