Ajax 跨域提交（CORS - Cross-Origin Resource Sharing）是 Web 开发中一个非常常见且重要的议题。浏览器出于安全考虑，会限制 JavaScript 发起的跨域 HTTP 请求。当一个网页的域（协议、域名、端口）与它发起的 Ajax 请求的域不同时，就会触发跨域问题。

以下是解决 Ajax 跨域提交的几种常见解决方案：

1. 服务器端 CORS 配置 (最推荐，最通用)

这是最标准、最安全、也是最推荐的解决方案。它依赖于服务器端进行配置，允许来自特定域的请求。

工作原理：
当浏览器发起跨域请求时，会发送一个带有 Origin 头的请求。服务器接收到请求后，如果配置允许，会在响应头中添加 Access-Control-Allow-Origin (或其他 CORS 相关头) 来告诉浏览器这个请求是允许的。

服务器端实现 (示例 - Node.js with Express):

javascript
const express = require('express');
const cors = require('cors'); // 安装: npm install cors
const app = express();

// 允许所有域的跨域请求 (不推荐生产环境)
// app.use(cors());

// 允许特定域的跨域请求 (推荐)
const corsOptions = {
origin: 'http://localhost:8080', // 允许你的前端应用所在的域
methods: 'GET,POST,PUT,DELETE', // 允许的HTTP方法
allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
};
app.use(cors(corsOptions));

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

app.post('/api/submit', (req, res) => {
console.log('Received data:', req.body);
res.json({ success: true, message: 'Data submitted successfully!' });
});

const port = 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});


服务器端实现 (示例 - Nginx):

在 Nginx 的 location 块中添加以下配置：

nginx
location /api/ {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080'; # 允许特定域
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允许的方法
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 允许的头
add_header 'Access-Control-Expose-Headers' 'Content-Length,X-Kuma-Revision'; # 暴露给前端的响应头

if ($request_method = 'OPTIONS') {
return 204;
}
# ... 其他代理或处理逻辑 ...
}


服务器端实现 (示例 - Apache):

在 Apache 的 .htaccess 文件或虚拟主机配置中添加：

apache
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://localhost:8080"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=204,L]
</IfModule>


配置说明：

* Access-Control-Allow-Origin: 允许的来源域。可以是 * (允许所有，不安全) 或一个具体的域（如 http://localhost:8080）。
* Access-Control-Allow-Methods: 允许的 HTTP 方法 (GET, POST, PUT, DELETE, OPTIONS 等)。
* Access-Control-Allow-Headers: 允许的请求头。
* Access-Control-Allow-Credentials: 如果你需要发送 cookies 或 HTTP 认证信息，需要设置为 true。注意，如果设置为 true，Access-Control-Allow-Origin 就不能是 *，必须是具体的域。
* Access-Control-Max-Age: 预检请求 (OPTIONS) 的缓存时间，单位秒。
* Access-Control-Expose-Headers: 允许前端 JavaScript 访问的服务器响应头。

预检请求 (Preflight Request):
对于一些“非简单请求”（如 PUT, DELETE 方法，或者设置了自定义请求头），浏览器会先发送一个 OPTIONS 请求（预检请求）来询问服务器是否允许实际的请求。服务器的 CORS 配置需要正确处理 OPTIONS 请求。

2. JSONP (JSON with Padding)

JSONP 是一种早期解决跨域问题的技术，利用 <script> 标签没有跨域限制的特性。

工作原理：
客户端在发起请求时，会动态创建一个 <script> 标签，其 src 属性指向服务器端地址，并带上一个回调函数名作为参数。服务器接收到请求后，会将返回的数据包裹在指定的回调函数中，然后输出为 JavaScript 代码。当 <script> 标签加载完成后，就会执行该回调函数，从而获取数据。

客户端实现 (jQuery):

javascript
$.ajax({
url: 'http://example.com/api/data',
dataType: 'jsonp',
jsonpCallback: 'myCallback', // 指定回调函数名
success: function(data) {
console.log('Received data:', data);
},
error: function(xhr, status, error) {
console.error('Error:', error);
}
});

// 定义回调函数
function myCallback(data) {
console.log('JSONP received data:', data);
}


服务器端实现 (Node.js with Express):

javascript
app.get('/api/data', (req, res) => {
const callback = req.query.callback; // 获取回调函数名
const data = { message: 'Hello from JSONP!' };

if (callback) {
res.send(`${callback}(${JSON.stringify(data)})`); // 包裹回调函数
} else {
res.json(data);
}
});


JSONP 的局限性：

* 只支持 GET 请求： JSONP 只能用于 GET 请求，因为 <script> 标签的 src 属性只能传递 URL 参数。
* 安全性问题： 容易受到 CSRF 攻击，并且无法验证请求的来源。
* 错误处理困难： 浏览器原生不支持 JSONP 的 error 事件，需要一些 hack 来实现。
* 不够通用： 仅适用于获取数据，不适合用于数据提交。

3. Proxy (代理服务器)

在开发环境中，我们常常使用代理服务器来解决跨域问题。

工作原理：
在本地开发环境中，我们通常会有一个前端服务器（如 Webpack Dev Server）和一个后端 API 服务器。前端应用直接向本地开发服务器发起请求。开发服务器接收到请求后，会将请求转发给真实的后端 API 服务器，并等待后端响应，然后将响应返回给前端。

Webpack Dev Server 代理配置 (vue.config.js 或 webpack.config.js):

javascript
// vue.config.js
module.exports = {
devServer: {
proxy: {
// 匹配以 '/api' 开头的请求
'/api': {
target: 'http://localhost:3000', // 目标后端服务器地址
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': '' // 将 '/api' 重写为空，以匹配后端实际路径
}
}
}
}
};


客户端请求：

javascript
fetch('/api/data') // 请求代理服务器
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));


优点：
* 在开发环境中非常方便，无需修改服务器端配置。
* 所有跨域请求都被代理服务器处理，前端代码逻辑更简洁。

缺点：
* 仅限于开发环境： 生产环境中，你需要部署一个独立的代理服务器，或者使用 Nginx/Apache 等 Web 服务器进行反向代理。
* 可能增加后端压力： 如果代理服务器处理大量请求，可能会增加其负载。

4. document.domain

如果两个域之间只有协议和端口不同，但主域名相同（例如：a.example.com 和 b.example.com），可以使用 document.domain 来实现同源策略的放宽。

工作原理：
将两个子域的 document.domain 设置为主域。例如，在 a.example.com 和 b.example.com 上都设置 document.domain = 'example.com'。这样，它们就被视为同源了。

示例：

* page1.html (在 a.example.com)

javascript
document.domain = 'example.com';
var iframe = document.createElement('iframe');
iframe.src = 'http://b.example.com/page2.html';
document.body.appendChild(iframe);
iframe.onload = function() {
var data = iframe.contentWindow.someGlobalVariable;
console.log(data);
};


* page2.html (在 b.example.com)

javascript
document.domain = 'example.com';
window.someGlobalVariable = 'Hello from b.example.com';


局限性：

* 主域相同： 仅适用于同根域名下的不同子域。
* 安全性： 尽管能解决一定问题，但在某些安全场景下可能不适用。
* 不适用于 Ajax： document.domain 主要用于解决 iframe 之间的跨域通信，而不是直接用于 Ajax 请求。

5. window.postMessage()

postMessage() 是 HTML5 提供的用于解决跨文档通信（包括跨域）的 API。

工作原理：
一个窗口（window）可以通过 postMessage() 方法向另一个窗口发送消息，而另一个窗口可以通过监听 message 事件来接收消息。

示例：

* sender.html (主窗口)

javascript
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from main window!', 'http://other.domain.com');


* receiver.html (iframe 窗口)

javascript
window.addEventListener('message', function(event) {
// 验证发送方的源，确保安全
if (event.origin !== 'http://main.domain.com') {
return;
}
console.log('Received message:', event.data);
});


优点：
* 安全：可以指定允许通信的源。
* 灵活：可以传递各种类型的数据。
* 适用于 iframe、popup 等多种场景。

缺点：
* 不直接适用于 Ajax： postMessage() 是一个消息传递机制，不能直接替代 Ajax 发起 HTTP 请求。通常用于配合其他技术（如iframe）实现跨域数据交互。

—

总结与选择

* 最通用、最推荐： 服务器端 CORS 配置。这是标准解决方案，适用于所有 HTTP 请求，并且安全性最高。
* 开发环境首选： Proxy (代理服务器)。方便快捷，无需修改后端。
* 老旧技术，特定场景： JSONP。仅适用于 GET 请求获取数据，安全性较低。
* 特定场景（同根域名）： document.domain。适用于 iframe 间通信，但限制较多。
* 跨文档通信： window.postMessage()。适用于 iframe、popup 等，是一种消息传递机制。

在实际项目中，通常会以 服务器端 CORS 配置 为主，配合 Webpack Proxy 在开发环境加速开发流程。