POST 请求报 302 重定向状态码，出现跨域问题，如何解决？

站长

2024年06月30日 09:11 · 阅读数 7

题目描述

最近刚学了跨域，就想着使用 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

1个回答

test

2024-06-30

你这接口是第三方的，其本身就不支持跨域，并且最终是直接重定向到了实际的地址，即便是服务器允许了跨域，因为服务端返回的是 302 到的是一个图片资源，你最终拿到的应当为一个 blob 对象，你需要把 blob 转换后才能用作 img 的 src 上。

但是，如果你只是想要实现你上面的这个需求，那可以用更简单的办法，这个接口的文档里面已经写了的，同时支持 GET 和 POST 两种方式，所以你只需要把 POST 换成 GET，拼接好后直接赋值给 src 就好了，不需要使用 xhr。

<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 () {
        photo.src = 'https://tenapi.cn/v2/qqimg?qq=' + account.value
    }
</script>
</body>

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容