具體錯(cuò)誤信息
Access to XMLHttpRequest at 'http://' from origin 'http://' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
問(wèn)題緣由
這個(gè)問(wèn)題，糾纏了我很久
期初我是在寫前端代碼進(jìn)行調(diào)試，其中用到了axios，打開(kāi)控制臺(tái)一直在報(bào)上面的錯(cuò)誤，以為是跨域的問(wèn)題，所以一直針對(duì)跨域問(wèn)題進(jìn)行調(diào)試，但是還是解決不了，后來(lái)發(fā)現(xiàn)我的前端代碼有些小錯(cuò)誤，axios的method后面是沒(méi)有s的（我寫成了methods），修正之后還是解決不了。在解決跨域問(wèn)題的時(shí)候引入了一些其他依賴，我把依賴去除，問(wèn)題解決了...繃不住了啊
axios的方法名
axios的method不帶s，所以一定要細(xì)心
get方法，帶s沒(méi)有出現(xiàn)問(wèn)題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入axios的JS文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//發(fā)送請(qǐng)求
axios({
methods: 'get',
url: '自己的URL'
}).then((result) => {
//成功的回調(diào)
//result代表服務(wù)器響應(yīng)的所有數(shù)據(jù)，包含了響應(yīng)頭、響應(yīng)體
//result.data代表的是接口響應(yīng)的核心數(shù)據(jù)
console.log(result.data);
}).catch((err) => {
//失敗的回調(diào)
console.log(err);
});
</script>
</body>
</html>請(qǐng)求成功
?post方法帶s會(huì)出錯(cuò)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入axios的JS文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//發(fā)送請(qǐng)求
let article = {
title: '標(biāo)題',
category: '分類',
time: '2000-01-01',
state: '草稿'
};
axios({
methods: 'post',
url: '自己的url',
data: article
}).then((result) => {
//成功的回調(diào)
//result代表服務(wù)器響應(yīng)的所有數(shù)據(jù)，包含了響應(yīng)頭、響應(yīng)體
//result.data代表的是接口響應(yīng)的核心數(shù)據(jù)
console.log(result.data);
}).catch((err) => {
//失敗的回調(diào)
console.log(err);
});
</script>
</body>
</html>?控制臺(tái)報(bào)錯(cuò)
一定要細(xì)心啊...axios的method不能帶s
axios用別名的方式發(fā)送請(qǐng)求
這樣可以避免寫method，格式：axios.請(qǐng)求方式(url [, data [, config]])
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入axios的JS文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let article = {
title: '標(biāo)題',
category: '分類',
time: '2000-01-01',
state: '草稿'
};
// axios.get('http://localhost:8080/article/getAll').then((result) => {
// //成功的回調(diào)
// //result代表服務(wù)器響應(yīng)的所有數(shù)據(jù)，包含了響應(yīng)頭、響應(yīng)體
// //result.data代表的是接口響應(yīng)的核心數(shù)據(jù)
// console.log(result.data);
// }).catch((err) => {
// //失敗的回調(diào)
// console.log(err);
// });
axios.post('http://localhost:8080/article/add', article).then((result) => {
//成功的回調(diào)
//result代表服務(wù)器響應(yīng)的所有數(shù)據(jù)，包含了響應(yīng)頭、響應(yīng)體
//result.data代表的是接口響應(yīng)的核心數(shù)據(jù)
console.log(result.data);
}).catch((err) => {
//失敗的回調(diào)
console.log(err);
});
</script>
</body>
</html>檢查自己的依賴
依賴添加多了會(huì)出問(wèn)題，我針對(duì)跨域去解決問(wèn)題的時(shí)候，添加了如下依賴，導(dǎo)致控制臺(tái)出錯(cuò)
<!--繃不住了...-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.23</version>
</dependency>將其刪除后就沒(méi)問(wèn)題了文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-852752.html
又是被bug折磨的一天文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-852752.html
到了這里，關(guān)于控制臺(tái)報(bào)錯(cuò)Access to XMLHttpRequest at ‘http://‘ from origin ‘http://‘ has been blocked by CORS policy的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
