跨域访问与XMLHttpRequest

引言

在前端开发中，我们经常会遇到需要通过发送XMLHttpRequest（以下简称XHR）请求来获取后端服务的数据。然而，由于同源策略的限制，XHR请求默认情况下只能发送到同一域名下的接口。那么，当我们需要请求不同域名下的接口时，就会遇到跨域访问的问题。本文将介绍跨域访问的概念以及解决方案，并以Access to XMLHttpRequest at 'file:///Users/mac126/Desktop/jquery-photos-mast为例进行说明。

什么是跨域访问？

跨域访问（Cross-Origin Resource Sharing，简称CORS）是指在浏览器中，当前页面的域名与请求的资源所在的域名不一致时，浏览器会限制页面对该资源的访问。这是为了防止恶意网站获取其他域名下的数据，提高安全性。

同源策略

同源策略（Same-Origin Policy）是浏览器的一种安全策略，指的是页面中的脚本只能读取同源（协议、域名、端口相同）的数据。换句话说，如果当前页面的域名是`

解决方案

JSONP

JSONP（JSON with Padding）是一种跨域访问的解决方案，它利用<script>元素可以跨域引用资源的特性。通过动态创建<script>标签，将请求的数据作为回调函数的参数返回给页面。例如：

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

var script = document.createElement('script');
script.src = '
document.body.appendChild(script);

在上述代码中，我们动态创建了一个<script>标签，并将请求的URL设置为`

代理服务器

另一种常见的解决方案是通过代理服务器转发请求。我们可以在同一域名下设置一个后端接口，接收前端发送的请求，并将请求转发到目标域名下的接口。这样，前端通过访问同一域名下的接口，间接实现了跨域访问。例如：

// 前端请求
xhr.open('GET', '/api');
xhr.send();

// 代理服务器转发请求
app.get('/api', function(req, res) {
  // 转发请求到目标域名下的接口
  http.get(' function(response) {
    var body = '';
    response.on('data', function(chunk) {
      body += chunk;
    });
    response.on('end', function() {
      res.send(body);
    });
  });
});

在上述代码中，前端通过发送请求/api，代理服务器接收到请求后，将请求转发到`

CORS

CORS是官方推荐的解决方案，通过在服务器端设置响应头中的Access-Control-Allow-Origin字段，允许指定的域名访问资源。服务器返回的响应头中包含Access-Control-Allow-Origin: *或者`Access-Control-Allow-Origin:

// 服务器端设置响应头
res.setHeader('Access-Control-Allow-Origin', '

在上述代码中，服务器将响应头中的Access-Control-Allow-Origin字段设置为`

以示例说明

根据提供的示例Access to XMLHttpRequest at 'file:///Users/mac126/Desktop/jquery-photos-mast，