Ajax如何处理跨域请求

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。在处理跨域请求时，由于浏览器的同源策略限制，Ajax默认只能向同源的服务器发送请求。为了实现跨域请求，可以采用以下几种方法：

1. JSONP（JSON with Padding）

JSONP是一种通过<script>标签来实现跨域请求的方法。它利用了<script>标签没有跨域限制的特性。

服务器端：

// 假设服务器端返回的数据格式为JSONP
app.get('/data', (req, res) => {
  const data = { message: 'Hello, World!' };
  const callback = req.query.callback;
  res.type('text/javascript').send(`${callback}(${JSON.stringify(data)})`);
});

客户端：

<script>
function handleResponse(data) {
  console.log(data);
}
</script>
<script src="http://example.com/data?callback=handleResponse"></script>

2. CORS（Cross-Origin Resource Sharing）

CORS是一种现代的跨域解决方案，它允许服务器通过设置HTTP头来告诉浏览器允许哪些跨域请求。

服务器端：

// 假设使用Express框架
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有域名访问
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello, World!' });
});

客户端：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

3. 代理服务器

通过在同源服务器上设置一个代理，将跨域请求转发到目标服务器。

服务器端（Node.js + Express）：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
  target: 'http://example.com',
  changeOrigin: true,
}));

app.listen(3000);

客户端：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

4. 使用Fetch API和CORS

Fetch API是现代浏览器提供的一种更简洁的Ajax请求方式，它也支持CORS。

客户端：

fetch('http://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

总结

• JSONP：适用于简单的GET请求，但不安全且不支持POST请求。
• CORS：现代且安全的解决方案，支持各种HTTP方法和自定义头。
• 代理服务器：适用于复杂场景，可以灵活处理各种请求。
• Fetch API：现代且简洁的Ajax请求方式，支持CORS。

选择哪种方法取决于具体的需求和场景。