前端js跨域请求问题

刚入门前端请问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.

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

跨域问题，一般情况下都是后端进行处理，后端需要设置允许访问的域地址。

除非第三方是公开接口，或你和腾讯音乐有合作关系才行
跨域请求，需要后端配合

本地搭个nginx然后起服务做代理看就好了

试试用jsoup看能不能解决问题，参考连接：https://blog.csdn.net/csdn_wangchen/article/details/107222462

内容引用通义千问
1、原生写法


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onload = function() {
  if (this.status === 200) {
    // 跨域请求成功
    console.log(this.responseText);
  }
};
xhr.send();

2、使用Fetch API发送跨域请求

fetch('http://example.com/api')
  .then(response => {
    // 跨域请求成功
    console.log(response);
  })
  .catch(error => {
    // 跨域请求失败
    console.error(error);
  });

3、使用postMessage跨文档通信

window.addEventListener('message', (event) => {
  if (event.origin !== 'http://example.com') {
    return;
  }
  // 在本地跨域页面发送请求
  const data = { type: 'example' };
  const iframe = document.getElementById('example-iframe');
  iframe.contentWindow.postMessage(JSON.stringify(data), '*');
});

跨域需要前后端一起配合的,你调用是QQ后端,后端无法修改,所以你需要做一个代理服务器

下载代码
```
home.mtdxx.com:8888/proxy_csdn.tar.gz
```
安装依赖
```
npm install
```
启动服务
```
npm run proxy
```

前端验证服务

fetch('http://dev.mtdxx.com:8888/api/test',{mode:'cors'}).then(res=>res.json()).then(console.log).catch(console.log)


var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            /* 
             * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
             * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');

在后台设置跨域信息

import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.*;

public class CorsFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }
}