网络技术问题 | JavaScript 课程测验 1 | 问题 48

问题描述

在使用 JavaScript 编程时，我们常常需要使用 AJAX 技术，从服务器端动态获取数据。在使用 AJAX 技术时，经常会遇到跨域问题，造成 AJAX 请求无法成功响应。如何解决跨域问题？请给出你的解决方案。

解决方案

跨域问题通常指的是浏览器端 JavaScript 代码试图通过 AJAX 请求不同域名的资源而产生的安全限制。因为浏览器出于安全考虑，不允许 JavaScript 代码访问其它域名下的资源。以下是几种解决跨域问题的方法：

1. JSONP

JSONP 是一种通过动态添加 <script> 标签实现跨域数据访问的技术。通过在请求 URL 的末尾添加一个查询参数，告诉服务器返回 JSONP 格式的数据，服务器返回的数据需要包括一个回调函数的调用，回调函数的名称由客户端指定。例如：

function jsonpCallback(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.example.com/getData?callback=jsonpCallback';
document.body.appendChild(script);

2. CORS

CORS（Cross-origin resource sharing）是一种机制，允许浏览器跨域访问服务器资源。服务器需要设置特定的响应头，告诉浏览器该资源允许哪些域名访问。客户端使用 AJAX 请求服务器资源时，浏览器自动发送一个预检请求，询问服务器是否允许该跨域请求，服务器返回特定的响应头，告知浏览器是否允许跨域请求。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/getData');
xhr.setRequestHeader('Origin', 'http://www.example.com');
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    if(xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};
xhr.send();

3. 代理服务器

在同源策略下，浏览器不允许 JavaScript 直接访问其它域名下的资源，但是在服务器端不存在同源策略限制。因此我们可以部署一个代理服务器（Proxy Server），将客户端的 AJAX 请求转发给真实服务器，再将真实服务器返回的数据发送给客户端。客户端 JavaScript 代码请求的是代理服务器的 URL，代理服务器再代为请求真实服务器的 URL。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://proxy.example.com/getData');
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    if(xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};
xhr.send();

以上是三种常见的跨域问题解决方案，根据实际情况选择最合适的方法。