跨域访问XMLHttpRequest被阻止

当我们在使用XMLHttpRequest对象进行跨域访问时，可能会遇到浏览器的同源策略导致请求被阻止的问题。同源策略要求请求的协议、域名和端口都相同才能进行访问。

以下是几种解决跨域访问XMLHttpRequest被阻止的方法：

1. JSONP（JSON with Padding）：JSONP是一种利用<script>标签的src属性不受同源策略限制的特性来实现跨域请求的方法。在服务端返回的数据会被包装在一个函数调用中，并通过动态创建<script>标签来获取数据。示例代码如下：

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

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

2. CORS（Cross-Origin Resource Sharing）：CORS是一种浏览器的机制，允许服务器在响应头中设置一些额外的字段，来允许跨域访问。在客户端代码中，只需正常使用XMLHttpRequest对象发送请求即可。示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.withCredentials = true; // 允许发送跨域凭证（如Cookie等）
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

3. 代理：通过在客户端和服务端之间设置一个中间层来转发请求，可以绕过同源策略的限制。客户端将请求发送给代理服务器，代理服务器再将请求转发给目标服务器，并将响应返回给客户端。示例代码如下：

// 客户端代码
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api', true); // 请求代理服务器上的路径
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

// 代理服务器代码（示例使用Node.js和Express框架）
const express = require('express');
const request = require('request');

const app = express();

app.get('/api', (req, res) => {
  const apiURL = 'http://example.com/api'; // 目标服务器的URL
  req.pipe(request(apiURL)).pipe(res);
});

app.listen(3000, () => {
  console.log('Proxy server listening on port 3000');
});

请注意，以上方法中的一些可能需要在服务端进行相应的配置或处理。具体的解决方法取决于实际的需求和开发环境。