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

新手上路,请多包涵

题目描述

  • 最近刚学了跨域,就想着使用 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
阅读 5.6k
2 个回答

你这接口是第三方的,其本身就不支持跨域,并且最终是直接重定向到了实际的地址,即便是服务器允许了跨域,因为服务端返回的是 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>

服务器设置白名单:

Access-Control-Allow-Origin: your-domain.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

或者用代理服务器,在后端服务器上创建一个代理,把POST请求发送到目标服务器并且把响应返回给前端。这样,所有的请求就会被发送到后端服务器,而不会直接发送到目标服务器,这样也解决了跨域的问题。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题