资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Ajax跨域

Ajax跨域

xiaotianyi / 3422人阅读

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在的个人的知识整理仓库，欢迎投稿跨域简介常用跨域方法跨域简介所谓跨域指的是请求从其他的域获取数据或者传输数据所谓域同源，指的是两个服务器资源的根的域名端口协议三者完全相同，只要

发布自Kindem的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在Kindem的个人的 IT 知识整理仓库，欢迎 Star、Fork、投稿

Ajax跨域简介

常用跨域方法

CORS

JSONP

Ajax跨域简介

所谓Ajax跨域指的是Ajax请求从其他的域获取数据或者传输数据

所谓域同源，指的是两个服务器资源的根url的域名、端口、协议三者完全相同，只要三者中任何一个不同，则说明产生了跨域

给一个例子，对于第一个服务器资源，其他一些url的同源情况如下:

http://www.test.com/index.html

http://www.test.com/index.js            同源
http://www.test.com/login/login.js      同源
https://www.test.com/index.html         跨域(协议)
http://www.a.com/index.html             跨域(域名)
http://a.com/index.html                 跨域(不同子域)
http://www.test.com:8080/index.html     跨域(端口)
常用跨域方法 CORS

CORS是一个W3C标准，其全称为Cross-Origin Resource Sharing，即跨域资源共享。它允许浏览器向跨域服务器发送XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制

CORS需要浏览器和服务器同时支持，目前主流浏览器都支持这个标准(IE>=10)，所以CORS的关键主要在于服务器，要支持这个功能，往往开发者需要在服务器端进行额外设置

另外，CORS标准对用户来说是透明的，用户感知不到CORS的存在，一切都是浏览器自动完成。当浏览器检测到跨域的Ajax请求时，就会自动做出一些处理，使得请求能够跨域

跨域的Ajax请求分为两种：

简单请求:

请求方法为HEAD、POST、GET之一

HTTP头字段只有Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type中的一种或多种

HTTP头字段中的Content-Type字段的取值为application/x-www-form-urlencoded、multipart/form-data、text/plain之一

非简单请求: 所有不满足上述规则的请求

CORS对于两种不同的请求的处理是不同的

对于简单请求，一个跨域Ajax请求的处理流程如下:

浏览器自动在本次请求的HTTP头中添加Origin字段，表示这次请求来自的域

服务器根据Origin字段判断这一次请求是否在许可范围内：

如果不在，返回一个正常的HTTP响应，只不过响应的HTTP头中没有Access-Control-Allow-Origin字段，浏览器将认为这一次跨域Ajax没能成功

如果在，服务器会在响应HTTP头中添加这几个字段

Access-Control-Allow-Origin: 这个字段标识服务器认同的Origin，这个Origin为*时标识服务器认同所有源。只有请求的HTTP头的Origin与该字段同源时，浏览器才会认为这一次跨域Ajax请求成功了

Access-Control-Allow-Credentials: 这个字段标识服务器允许Cookie，如果设置为true则标识允许，默认为不允许

Access-Control-Expose-Headers: 允许XMLHttpRequest获取的额外字段名

对于非简单请求，一个跨域Ajax请求的处理流程如下:

浏览器在发送正式的Ajax请求之前，会提前发送一次OPTIONS请求，头信息中有:

Origin: 请求的源

Access-Control-Request-Method: 浏览器会用的的HTTP方法

Access-Control-Request-Headers: 浏览器会额外发送的头信息字段

收到这个请求之后，服务器将会返回一些控制信息，最重要的仍然是上面说到的判定是否允许跨域的Access-Control-Allow-Origin

如果服务器返回了一个正常的HTTP响应，则浏览器会认为OPTIONS请求成功，接下来则会进行真正的的请求

服务器正常处理真正的请求，并且在返回的HTTP响应中也带上Access-Control-Allow-Origin，浏览器会再一次校验这一字段

可见CORS标准本身并不复杂，其核心是服务器和浏览器验证域是否被允许

JSONP

JSONP的全称为JSON with Padding，是JSON数据的一种使用模式，JSONP同样是为了支持跨域Ajax请求而生的，但是它相对CORS来说对古老的浏览器兼容性较好，也更加简单。

JSONP的原理是JavaScript注入，在html中使用

想象一下如果引入的脚本是这样的:

dealData({
    username: "kindem",
    age: 15,
    // ...
});

不是就相当于从服务器拿到一段数据并且进行处理了吗?

接下来可以设想一下，假设服务器对于src指向的url的处理并不是返回一个静态文件，而是动态地组合出一段文本，这段文本一上面给的形式返回，里面的参数由服务器动态生成，而调用的函数则是前端约定好的函数，则相当于变相地返回了一段跨域的数据，这就是JSONP的核心思想

GPU云服务器 云服务器 ajax跨域 jquery ajax 跨域 ajax跨域访问 php 跨域ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97211.html

相关文章

  • ajax跨域，这应该是最全的解决方案了

    摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。 前言 从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出iss...

    ytwman 评论0 收藏0

  • 再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

    摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。 浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

    enda 评论0 收藏0

  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要：在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。 在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。关于跨域，有N种类型，现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍)，内容...

    Yangyang 评论0 收藏0

  • 慕课网_《Ajax跨域完全讲解》学习总结

    摘要：时间年月日星期三说明本文部分内容均来自慕课网。当预检请求通过的时候，才发送真正的请求。 时间：2018年04月18日星期三说明：本文部分内容均来自慕课网。@慕课网：https://www.imooc.com教学源码：https://github.com/zccodere/s...学习源码：https://github.com/zccodere/s... 第一章：课程介绍 1-1 课程介...

    fredshare 评论0 收藏0

发表评论

登陆后可评论

0条评论

xiaotianyi

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<