已解决:axios get请求不跨域,post请求跨域了

 

 

 

做了个原生的简单页面,但是需要请求到后端的数据,然后它跨域了,后台开启了允许跨域,这时候get请求是正常了,post请求带参数就出现了跨域,如图:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
const sendClickId = () =>{
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.post("/api", qs.stringify({
name: "ALin",
id: "666"
})).then(res => {

})
}
sendClickId()
</script>
</body>
</html>

 

因为我以前有过经验,所以我知道是没有导入qs的原因

<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

然后我导入了qs的时候,又出现了一个奇怪的问题:

 

这就给我整迷糊了,然后是在这个博主那里找到了答案:

Browser(浏览器) cdn方式引入qs库的使用方法_逆水行舟,不进则退-CSDN博客_browser.min.js cdn

// 一般引入qs库都赋值为qs,不过浏览器全局引入的是 window.Qs对象,
// 所以直接用 qs.stringify() 会报 qs undefined
var qs = Qs
原来是要声明一下,我直接喊666

解决了qs undefined的问题,就能正常请求接口了。。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script type="text/javascript">
// 注意别写少了qs =Qs 否则会报undefined
var qs = Qs
const sendClickId = () =>{
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.post("/api", qs.stringify({
name: "ALin",
id: "666"
})).then(res => {

})
}
sendClickId()
</script>
</body>
</html>
接口请求成功

 


————————————————
版权声明:本文为CSDN博主「阿林阿林」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41793354/article/details/121791599

posted @ 2022-09-27 13:50  小猪冒泡  阅读(1879)  评论(0编辑  收藏  举报