做了个原生的简单页面,但是需要请求到后端的数据,然后它跨域了,后台开启了允许跨域,这时候get请求是正常了,post请求带参数就出现了跨域,如图:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script src="/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="/qs/6.7.0/qs.min.js"></script>
然后我导入了qs的时候,又出现了一个奇怪的问题:
这就给我整迷糊了,然后是在这个博主那里找到了答案:
Browser(浏览器) cdn方式引入qs库的使用方法_逆水行舟,不进则退-CSDN博客_browser.min.js cdn
// 一般引入qs库都赋值为qs,不过浏览器全局引入的是 window.Qs对象,// 所以直接用 qs.stringify() 会报 qs undefinedvar qs = Qs
原来是要声明一下,我直接喊666
解决了qs undefined的问题,就能正常请求接口了。。。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script src="/axios/0.18.0/axios.min.js"></script><script src="/qs/6.7.0/qs.min.js"></script><script type="text/javascript">// 注意别写少了qs =Qs 否则会报undefinedvar qs = Qsconst 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>
接口请求成功