跨域

morgan 发布于2019-08-20 17:38 / 510人阅读

摘要：一同源策略同源协议，域名，端口三者都相同视为同源。同源策略主要是出于安全的考虑。不受同源策略限制的跨域资源写入。优点所有的浏览器都支持是解决该问题的终极方案四跨域数据存储访问受限情况存储在浏览器中的数据，如和，以源进行分割。

一、同源策略（Same-Origin Policy） 1.1 同源（Same Origin）

协议，域名，端口三者都相同视为同源。同源策略主要是出于安全的考虑。一个源不能访问另一个源的DOM，客户端数据，发生Ajax请求。

1.2 不受同源策略限制的

跨域资源写入。

报错：

2.2 window.postMessage 2.2.1 介绍

Html5中引入了一个新的API： window.postMessage，可以安全的使不同源文档通信。
分别修改A，B页面内容
A页面：



    
        Index

B页面：



    
         Detail
    
    
        Detail

显示：

2.2.2 优点

A：安全
B：可以传输任何数据类型

2.2.3 缺点

A：这是html5的API，存在兼容性问题。

三、跨域Ajax请求 3.1 受限情况

Ajax请求只能想同源的地址发生请求，否则就报错。

处理这类情况是可通过JSONP，CORS方式解决。

3.2 JSONP

参考：

CSDN：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/index.html

JSONP其实是解决异步跨域请求的问题，跟AJAX半毛钱关系都没有。

3.2.1 原理

script标签不受同源策略约束，即src属性的值可以是非同源地址。把请求的接口地址和参数通过URL的方式添加到一个script标签的src属性上，接口处理完成后返回个JS函数调用语句字符串。这样就实现了异步跨域请求接口。

3.2.2 怎么做

A：Client端script标签的src属性指向服务的地址
B：服务端返回JS回调函数调用语句的字符串。回调函数名一般是客户端传过来的，或者前后端约定的回调函数名。

3.2.3 缺点

A：只支持GET请求。

3.2.4 优点

A：所有的浏览器都支持

3.3 CORS

CORS是解决该问题的终极方案

四、跨域数据存储访问 4.1 受限情况

存储在浏览器中的数据，如localStorage和IndexedDB，以源进行分割。每个源都拥有自己多带带的存储空间，一个源中的Javascript脚本不能对属于其它源的数据进行读写操作。
处理这种情况是可通过window.postMessage方式解决。

4.2 window.postMessage

postMessage实现了两个不同源的页面间通信，可以用来解决跨域数据访问问题。

4.3 特殊的Cookie

Cookie关于源的定义不同，参考C_Cookie。

云服务器 GPU云服务器端跨域跨域 cdn跨域 SONP跨域

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

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

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

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

ytwman 2019-08-22 11:21 评论0 收藏0
大话javascript 5期：跨域

摘要：同源策略所谓同源是指协议，域名，端口均相同。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的...

jzzlee 2019-08-23 16:42 评论0 收藏0
用本地运行的demo快速入门跨域

摘要：学习建议在学习其中一种跨域方法的时候，建议边运行项目里的，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的，所以这里就不再赘述跨域知识。前言因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始...

yy736044583 2019-08-20 17:19 评论0 收藏0
用本地运行的demo快速入门跨域

摘要：学习建议在学习其中一种跨域方法的时候，建议边运行项目里的，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的，所以这里就不再赘述跨域知识。前言因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始...

GraphQuery 2019-08-29 12:48 评论0 收藏0
用本地运行的demo快速入门跨域

摘要：学习建议在学习其中一种跨域方法的时候，建议边运行项目里的，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的，所以这里就不再赘述跨域知识。前言因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始...

Integ 2019-08-01 17:00 评论0 收藏0
javascript跨域

摘要：实现跨域的原理通过方式请求载入并执行一个文件，相当于通过的形式的导入一个外部的方法语法该函数是简写的函数，等价于在中，您可以通过使用形式的回调函数来加载其他网域的数据，如。将自动替换为正确的函数名，以执行回调函数。更多详情见http://blog.zhangbing.club/Ja... 最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以...

PingCAP 2019-08-22 18:10 评论0 收藏0