Ajax 跨域的解决方案

Ajax与跨域

Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。
简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。
如何手写 XMLHttpRequest 不借助任何库：

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
   // 这里的函数异步执行
   if (xhr.readyState == 4) {
     if (xhr.status == 200) {
       alert(xhr.responseText)
     }
   }
}
xhr.open("GET", "/api", false)
xhr.send(null)

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。
那么是出于什么安全考虑才会引入这种机制呢？ 其实主要是用来防止 CSRF 攻击的。简单点说，CSRF 攻击是利用用户的登录态发起恶意请求。
然后我们来考虑一个问题，请求跨域了，那么请求到底发出去没有？ 请求必然是发出去了，但是浏览器拦截了响应。
常见的几种跨域解决方案有：

• JSONP：利用同源策略对<script>标签不受限制，不过只支持GET请求；
• CORS：实现 CORS 通信的关键是后端，服务端设置 Access-Control-Allow-Origin 就可以开启，备受推崇的跨域解决方案，比 JSONP 简单许多；
• Node中间件代理
• nginx反向代理：主要是通过同源策略对服务器不加限制。