极客观点
项目管理
HarmonyOS
题目描述
- 最近刚学了跨域，就想着使用 API， Get 请求，JSONP 我基本上没啥问题，就是 post 请求有点
- 我请求的是 https://tenapi.cn/ 提供的 API 文档
- 技术栈：nodejs，ajax 请求
- 遇到的问题：POST请求 返回重定向302 跨域请求问题
请求接口：
https://tenapi.cn/v2/qqimg请求示例：
curl https://tenapi.cn/v2/qqimg -X POST -d 'qq=123456'返回值：
https://q1.qlogo.cn/g?b=qq&nk=123456&s=100题目来源及自己的思路
- 一个按钮用于提交 post 请求
- input 标签收集参数 QQ 号
- 获取到图片地址后，修改 img src 展示图片
相关代码
<body>
<button class="btn">发起请求</button>
<br>
获取QQ头像：<input type="text" class="ipt" placeholder="请输入你的QQ号" autocomplete="off">
<br>
<img src="https://q1.qlogo.cn/g?b=qq&nk=123456&s=100" alt="" class="photo">
<script>
const btn = document.querySelector('.btn');
const account = document.querySelector('.ipt');
let photo = document.querySelector('.photo');
btn.onclick = function () {
let xhr = new XMLHttpRequest();
xhr.open('post', 'https://tenapi.cn/v2/qqimg', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('qq=' + account.value);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
photo.scr = xhr.responseText;
} else {
console.log('请求失败');
}
}
}
}
</script>
</body>你期待的结果是什么？实际看到的错误信息又是什么？
- 期待的结果是获取到数据修改 img src 展示我获取到的图片
- 实际发生了跨域错误
Network 检查：
https://tenapi.cn/v2/qqimg
状态码：302
https://q1.qlogo.cn/g?b=qq&nk=973021328&s=100 【标红】
状态码：200控制台输出信息：
Access to XMLHttpRequest at 'https://q1.qlogo.cn/g?b=qq&nk=973021328&s=100' (redirected from 'https://tenapi.cn/v2/qqimg')
from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
请求失败
qq.html:27
GET https://q1.qlogo.cn/g?b=qq&nk=973021328&s=100 net::ERR_FAILED 200
你这接口是第三方的，其本身就不支持跨域，并且最终是直接重定向到了实际的地址，即便是服务器允许了跨域，因为服务端返回的是 302 到的是一个图片资源，你最终拿到的应当为一个 blob 对象，你需要把 blob 转换后才能用作 img 的 src 上。
但是，如果你只是想要实现你上面的这个需求，那可以用更简单的办法，这个接口的文档里面已经写了的，同时支持 GET 和 POST 两种方式，所以你只需要把 POST 换成 GET，拼接好后直接赋值给 src 就好了，不需要使用 xhr。