前端js跨域请求问题

Question

刚入门前端请问js的跨域请求应该怎么解决？chatGpt都问了个遍写给出的三种写法代码如下

var url = "https://c.y.qq.com/tips/fcgi-bin/fcg_music_red_dota.fcg?_=1685457629182&cv=4747474&ct=24&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=1&uin=0&g_tk_new_20200303=5381&g_tk=5381&cid=205360410&qq=0&reqtype=1&from=2"

        // 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();

        // 初始化 XMLHttpRequest 对象，设置请求方式、请求地址和是否异步
        xhr.open('GET', url, true);

        // 设置请求头部信息，用于携带 token 或其他信息
        xhr.setRequestHeader('Content-type', 'application/json');

        // 设置跨域请求的 withCredentials 为 true
        xhr.withCredentials = true;

        // 设置 XMLHttpRequest 对象的 onreadystatechange 方法
        xhr.onreadystatechange = function () {
            // readyState 等于 4 表示请求已完成，status 等于 200 表示请求成功
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                // 成功获取到数据，进行处理
                console.log(xhr.responseText);
            }
        };

        // 发送 AJAX 请求
        xhr.send();




        // 定义一个名为 jsonp 的函数，用于接收 callback 返回的数据
        function jsonp(url2) {
            // 创建一个 script 标签
            const script = document.createElement('script');

            // 将 src 属性设置为 url + '?callback=' + callback
            script.src = url2

            // 将 script 标签添加到页面的头部
            document.head.appendChild(script);

            // 在 script 标签加载完毕后，将其从页面中移除
            script.onload = function () {
                document.head.removeChild(script);
            };
        };

        // 调用 jsonp 函数，请求跨域的数据
        jsonp(url);
        // showData 将会在请求到数据后被回调
        function showData(data) {
            console.log(data);
        }



        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation: ', error);
            });

这三种写法仍然是报
Access to XMLHttpRequest at 'https://c.y.qq.com/tips/fcgi-bin/fcg_music_red_dota.fcg?_=1685457629182&cv=4747474&ct=24&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=1&uin=0&g_tk_new_20200303=5381&g_tk=5381&cid=205360410&qq=0&reqtype=1&from=2%27 from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

我猜你应该是在练习如何调取接口， 不行的话我为你提供接口吧，跨域问题有时不一定是前端的事儿