关于跨域（子域）AJAX请求的一个问题

在前端开发中，我们常常会遇到需要从一个网站向另一个网站发送 AJAX 请求的情况。但是，在默认情况下，浏览器是不允许这种跨域请求的，因为这可能会带来安全风险。本文将介绍跨域（子域）AJAX请求的问题，并提供解决方案和示例代码。

什么是跨域（子域）AJAX请求？

跨域（子域）AJAX请求指的是从一个网站（或子域）向另一个网站（或子域）发送 AJAX 请求。例如，从 https://example.com 发送请求到 https://api.example.com 或从 https://blog.example.com 发送请求到 https://api.example.com。

跨域（子域）AJAX请求的问题

浏览器出于安全考虑，限制了跨域（子域）AJAX请求，并且默认情况下会拒绝这些请求。这是因为如果允许跨域请求，攻击者就可以通过恶意网站或脚本来窃取用户的信息或执行一些危险的操作。

解决跨域（子域）AJAX请求的方法

JSONP

JSONP 是一种跨域请求的解决方案，它通过动态创建 script 标签来实现跨域请求。具体来说，JSONP 将回调函数名作为参数传递给服务器端，服务器将返回一个包含该回调函数的 JavaScript 代码，浏览器执行该 JavaScript 代码就可以得到返回的数据。

示例代码：

function handleResponse(response) {
    console.log(response);
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);

CORS

CORS（Cross-Origin Resource Sharing）是一种跨域请求的标准解决方案。它通过在服务端设置响应头来允许跨域请求，并支持各种 HTTP 请求方法。具体来说，服务器端需要设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和其他一些响应头，浏览器在发送跨域请求时会自动检查这些响应头并决定是否允许请求。

示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
    console.log(xhr.responseText);
};
xhr.send();

代理服务器

代理服务器是一种常见的跨域请求解决方案。具体来说，我们可以在同源的服务器端部署一个代理服务器，让该服务器代替浏览器向目标服务器发起请求，然后再将结果返回给浏览器。这样就可以避免跨域请求带来的安全风险。

示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
    console.log(xhr.responseText);
};
xhr.send();

在这个示例中，我们将请求发送到同源的服务器上，并将路径设置为 /api/data，然后在服务器端使用代理方式向目标服务器发起请求并返回结果。

结论

跨域（子域）AJAX请求是前端开发中常见的问题，但同时也带来了安全风险。本文介绍了三种解决方案：JSONP、CORS 和代理服务器，并提供了相应的示例代码。在实际开发中，我们可以根据具体情况选择适合的解决方案来处理跨域请求问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15641