浅谈jquery中ajax跨域提交的时候会有2次请求的问题

跨域请求是指在浏览器中，当前网页所在的域名与请求的目标域名不一致时，发起ajax请求时会受到浏览器同源策略的限制而被拒绝。为了解决这个问题，jQuery提供了一个jsonp请求的方式，可以跨域获取数据，但是在这个过程中会出现“2次请求”的问题。

所谓“2次请求”，指的是在跨域访问时，浏览器会先发送一次跨域请求，又发送一次同域请求。这是因为jsonp的实现机制需要先将数据转换为JSON格式，在通过script标签获取数据，因此会先发送一次跨域请求，获取到数据后再发一次同域请求获取JSONP回调函数执行的结果。

这个问题在一些场景下可能会带来一些副作用，比如会带来无意义的流量和开销。同时对于一些需要保密的数据，这种行为也可能泄漏数据。

解决这个问题有多种方式，我们可以使用以下两种：

1. CORS（跨域资源共享）

CORS是一种跨域解决方案，允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它的实现方法是在服务器端设置响应头，浏览器可以通过预检请求（Preflight Request）获取相应的响应头，从而得知当前服务器是否允许跨域。在实际应用中，我们可以在服务器端添加如下代码来开启CORS：

header("Access-Control-Allow-Origin: *");

这样就可以在跨域请求时直接使用ajax来获取数据了，不需要再使用jsonp的机制，从而避免了“2次请求”的问题。

2. 使用自定义的JSONP实现

我们可以自定义实现一个JSONP，来避免出现“2次请求”的问题。自定义JSONP的实现可以在服务器端返回一个固定的JS脚本，客户端在接收到这个脚本后就可以直接执行。这样可以避免由于浏览器的安全策略而产生的同源限制，避免了“2次请求”的问题。如：

// 支持 JSONP 跨域调用

function jsonp(options){

var s = document.createElement('script');

s.src = options.url + '?callback=' + options.callback;

document.head.appendChild(s);

}

这样我们就可以在跨域请求的时候直接使用自定义JSONP实现来获取数据了。

在实际应用中我们可以根据不同的需求来选择不同的解决方案。如果需要兼容老的浏览器，则可以考虑使用JSONP，如果需要更好的安全性和性能，则可以使用CORS。无论是哪种方案，在实现跨域请求时都需要注意数据的安全性和风险性，确保数据不会因为跨域而被泄漏或篡改。