已解决：axios get请求不跨域，post请求跨域了

最新推荐文章于 2024-05-01 15:08:21 发布

阿林阿林

最新推荐文章于 2024-05-01 15:08:21 发布

阅读量8.5k

点赞数 5

文章标签： http 前端 javascript

本文链接：https://blog.csdn.net/qq_41793354/article/details/121791599

版权

做了个原生的简单页面，但是需要请求到后端的数据，然后它跨域了，后台开启了允许跨域，这时候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的原因

然后我导入了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>

接口请求成功