### Chrome 浏览器中实现 CORS 跨域请求的方法 #### 使用 XMLHttpRequest 发起跨域请求 通过 `XMLHttpRequest` 对象可以发起带有 CORS 头的 HTTP 请求。为了使这种请求成功，服务器必须返回合适的响应头来表明允许来自特定源的请求。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); // 设置回调函数处理接收到的数据 xhr.onload = function() { if (xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } else { console.error('Error:', xhr.statusText); } }; // 添加额外的头部信息以便于调试或传递认证令牌等 xhr.withCredentials = true; xhr.send(); // 发送请求到目标URL[^1] ``` #### 利用 Fetch API 进行更简洁的操作 现代浏览器推荐使用更加灵活且功能强大的 `fetch()` 函数来进行网络操作。此接口同样遵循 CORS 政策，并提供了更好的错误处理机制和支持 Promise 的特性。 ```javascript fetch('https://api.example.com/data', { method: 'GET', headers: {'Content-Type': 'application/json'}, credentials: 'include' // 如果需要发送Cookie或其他身份验证信息，则应包含此项 }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));[^2] ``` #### 解决凭证与通配符冲突的问题 当涉及到携带用户凭据（如 Cookies 或 HTTP 认证）时，默认情况下无法将 `Access-Control-Allow-Origin:*` 和 `Access-Control-Allow-Credentials:true` 同时指定给同一个预检请求的结果。对于这种情况，在 Gin 框架下的解决方案是自定义中间件来动态设置这些头部字段，从而绕过这一限制并确保安全性[^4]。 #### JSONP 方案作为替代方案 尽管 JSONP 不再被广泛推崇因为它存在安全隐患并且只适用于 GET 请求，但在某些场景下仍然可用作一种简单的跨域通信手段。不过需要注意的是，随着 Web 技术的发展，优先考虑采用标准的 CORS 方法更为合适[^3]。