在Web开发中，由于同源策略的限制，JavaScript通常只能访问和操作同源（协议、域名、端口相同）的资源。然而，随着Web应用的发展，这种限制有时会成为阻碍，尤其是在需要使用Ajax进行跨域数据请求时。本文将详细讨论Ajax跨域问题及其两种常见解决方案：JSONP和CORS。
我们来明确什么是跨域。当浏览器尝试从一个源（协议+域名+端口）向另一个源发送请求时，如果两个源不匹配，就会遇到跨域问题。这包括但不限于以下情况：不同的协议（如HTTP和HTTPS），不同的域名（如example.com和www.example.com），或不同的端口号（如80和8080）。
1. JSONP（JSON with Padding）是一种解决跨域问题的非正式协议。它的核心思想是利用HTML中的`<script>`标签不受同源策略限制的特点。在客户端，我们可以创建一个`<script>`标签，并设置其`src`属性为远程服务器的URL，该URL包含一个回调函数名（例如`cb`）。服务器接收到请求后，会返回一段JavaScript代码，将数据包裹在指定的回调函数中（如`callback(data)`）。这样，客户端预先定义好的`callback`函数就可以接收到并处理这些数据。
示例代码：
```html
<script>
function callback(data) {
alert(data);
}
</script>
<script src="http://soul:8888/kuayu?cb=callback"></script>
```
服务器端：
```javascript
res.end('callback("jsonp")');
```
2. CORS（Cross-Origin Resource Sharing，跨源资源共享）是现代浏览器支持的一种更为安全的跨域方式。它通过在服务器端设置HTTP响应头`Access-Control-Allow-Origin`来允许特定的跨域请求。当设置为`*`时，表示允许所有源进行跨域请求。在客户端，我们使用Ajax发起请求，而服务器在接收到请求后，在响应头中添加`Access-Control-Allow-Origin:*`。
示例代码：
```html
<body>
<form id="form">
<!-- 省略表单内容 -->
</form>
</body>
<script>
$('#btn').on('click', function () {
$.ajax({
url: 'http://soul:8888/kuayu',
type: 'delete',
async: false,
success: function (data) {
alert(data);
},
});
});
</script>
```
服务器端（Node.js示例）：
```javascript
var http = require('http');
var url = require('url');
var server = http.createServer();
server.listen('8888', function () {
console.log('8888');
});
server.on('request', function (req, res) {
var urls = url.parse(req.url, true);
if (urls.pathname == '/kuayu') {
res.setHeader('Access-Control-Allow-Origin', '*');
// 返回实际数据
res.end('数据内容');
}
});
```
总结一下，JSONP适用于只需要GET请求且服务器能够支持动态返回JavaScript代码的情况，它不涉及浏览器的安全机制，但只支持GET请求，且无法处理错误。CORS则更为灵活，支持所有类型的HTTP请求，同时可以通过设置其他响应头控制请求权限，但需要服务器端配合。在实际应用中，开发者应根据项目需求和安全性考虑选择合适的跨域解决方案。
