jQuery.ajax方法获取不到跨域的响应头？

问题描述

问 题

//jQuery.ajax，complete和always都获取不到
               $.ajax({
                    url: 'http://localhost:9733/Home/AjaxIndex',
                    type: 'get',
                    dataType: 'script',
                    complete: function (jqXHR) {
                        console.log(jqXHR.getAllResponseHeaders())
                        console.log('=================================')
                    }
                })
                .always(function (d, s, jqXHR) {
                    console.log(jqXHR.getAllResponseHeaders())
                    console.log('=================================')
                })
 
//原生XMLHttpRequest
                var xhr = new XMLHttpRequest()
                xhr.open('get', 'http://localhost:9733/Home/AjaxIndex')
                xhr.onload = function () {
                    console.log('load:', xhr.getAllResponseHeaders())
                    console.log('=================================')
                }
                xhr.send()
                

结果(懒得截图，直接复制了)：

=================================

=================================
load: Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Content-Type: text/html; charset=utf-8
Cache-Control: private

=================================

原因是ajax获取不到跨域的响应头吗？查看了下文档，好像没有详细的说明
但是感觉很不合理啊，原生的XMLHttpRequest都能获取到，为什么ajax封装之后获取不到
如果说我要获取跨域的响应头，只能用原生的XMLHttpRequest来做了？

解决方案

被人一句话点醒了
jQuery.ajax的跨域是使用<script>来实现(不论dataType是script还是jsonp，但是同过json的部分跨域是可以获取到响应头的)，不使用XMLHttpRequest，所以自然获取不到响应头，服务器也不需要设置CORS相关的头部信息
元素的XMLHttpRequest能获取到响应头，但是需要服务器设置相关的CORS头部信息
其实就是jsonp和CORS的区别
让我产生疑惑的是跨域的时候jqXHR对象竟然保留了getResponseHeader这种无用的方法，既然jqXHR是内部封装的，为什么不在跨域的时候简化jqXHR，不然也容易给人以误解
如果有对jQuery源码研究比较清楚的dalao，还望指点，感激不尽

这篇关于jQuery.ajax方法获取不到跨域的响应头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！