ajax路径跨域【示例代码】

1、AJAX路径跨域是指在使用AJAX进行数据请求时，请求的目标资源位于不同的域名下。由于浏览器的同源策略限制，AJAX默认不允许跨域请求。为了解决这个问题，可以通过一些方法来实现跨域请求。

示例代码如下：

// 在前端代码中使用AJAX发送跨域请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

在上述示例中，我们使用XMLHttpRequest对象发送了一个GET请求，请求的目标资源位于`http://example.com/api/data`这个域名下。由于请求的目标域名与当前页面的域名不同，属于跨域请求。

2、为了实现跨域请求，我们可以通过以下几种方法来解决：

- JSONP：JSONP是一种跨域请求的方法，通过动态创建`<script>`标签来加载远程资源，并利用回调函数的方式获取数据。示例代码如下：

function handleResponse(response) {
  console.log(response);
}
var script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleResponse';
document.body.appendChild(script);

- CORS：CORS是一种跨域资源共享的机制，通过在服务器端设置响应头来允许跨域请求。示例代码如下：

// 在服务器端设置响应头
Access-Control-Allow-Origin: http://example.com
// 在前端代码中发送跨域请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

- 代理服务器：通过在同域名下设置一个代理服务器，将跨域请求转发到目标服务器上。示例代码如下：

// 在代理服务器上转发跨域请求
app.get('/api/data', function(req, res) {
  http.get('http://example.com/api/data', function(response) {
    response.pipe(res);
  });
});
// 在前端代码中发送跨域请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

通过上述方法，我们可以实现在AJAX中进行跨域请求，并获取到目标资源的数据。