跨域（入门）

Shonim 发布于2019-08-26 11:49 / 1199人阅读

摘要：跨域同源策略所谓同源，就是三个相同协议相同域名相同端口相同。同源策略的目的保证用户信息的安全，防止恶意网站窃取数据。是的标准，全称是跨域资源共享。是的一个，可以解决多窗口窗口和之间的消息通信的跨域问题。

JS跨域

同源策略

所谓“同源”，就是“三个相同”：协议相同、域名相同、端口相同。
同源策略的目的：保证用户信息的安全，防止恶意网站窃取数据。
如果是非同源，共有三种行为会受到限制：
1.Cookie、LocalStorage、IndexDB无法读取；
2.DOM无法获取；（主要场景是ifame跨域的情况，不同域名的iframe是限制互相访问的）
3.AJAX请求不能发送；

跨域的解决方法

跨域资源共享（CORS）

html5新增的标准，IE10以下不支持。
CORS是W3C的标准，全称是跨域资源共享(Cross-Origin Resource sharing)。CORS定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。它的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是成功还是失败。
使用：
对于前端，我们还是正常使用xhr对象发送ajax请求。唯一需要注意的是，我们需要设置xhr中的withCredentials为true，不然无法传递cookie，xhr.withCredentials=true;
对于服务端，需要在response header中设置如下两个字段：
Access-Control-Allow-Origin:http://www.yourhost.com
Access-Control-Allow-Credentials:true

JSONP

JSONP的原理：在页面上引入不同域上的js脚本文件是可以的，所以可以通过动态创建script标签，然后利用src属性进行跨域。通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。

注：src请求都必须是get方法，就像你在浏览器地址栏输入地址回车一样。

function fun(fata){
    console.log(data);
}
var body=document.getElementsByTagName("body")[0];
var script=document.getElement("script");
script.type="text/javascript";
script.src="demo.js?callback=fun";
body.appendChild(script);
//返回的js脚本直接会执行，就执行已经定义好的fun函数，并且把数据传入进来。
fun({"name":"name"})

CORS VS JSONP
都能解决ajax直接请求普通文件存在跨域无权访问的问题
1.JSONP只能实现get请求，而CORS支持所有类型的http请求
2.使用CORS，开发者可以使用普通的XHR发起请求和获得数据，比起JSONP有更好的错误处理
3.JSONP主要被老的浏览器支持，它们往往不支持CORS，而现代浏览器都支持CORS

document.domain

修改document.domain的方法只适用于不同子域的框架间的交互。
对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域这种方式非常适用于iframe跨域的情况，比如：
a页面地址为 http://a.yourhost.com
b页面为 http://b.yourhost.com。
这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。
之后，就可以通过 parent 或者 window["iframename"]等方式去拿到iframe的window对象了。

postMessage

postMessage是html5的一个API，可以解决多窗口、窗口和iframe之间的消息通信的跨域问题。
postmessage(data, origin)，其中data指的就是需要传递的数据，origin指的是具体的数据源地址(包括协议+域名+端口)。然后window对message事件进行监听。





document.getElementById("send").onclick = function() {
    var msg = document.getElementById("msg").value;
    var iframeWindow = document.getElementById("iframe").contentWindow;
    iframeWindow.postMessage(msg,"http://next.com/next.html");
}


    以下是接收到的消息：
    
         
    


window.addEventListnerner("message",handle,false){//window对message时间监听
}
function handle(event){
    if(event.origin==="http://source.com"){
        document.getElementById("msg").innerHTML=event.data;
    }
}

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

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

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

用本地运行的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
Nginx入门及如何反向代理解决生产环境跨域问题

摘要：还是回到万能的文件，添加匹配规则实现代理转发设置代理转发通过上面的设置，在重启服务，可以让页面中所有包含字段的请求都转为由服务器去向地址发送请求，从而巧妙的解决了浏览器的跨域问题。 1.Nginx入门与基本操作篇注：由于服务器是windows系统，所以本文主要讲解Nginx在windows下的操作。首先下载Nginx 解压缩，我们所有的配置基本都在万能的 nginx/conf/...

Moxmi 2019-07-25 14:38 评论0 收藏0
服务器部署工具 - 收藏集 - 掘金

摘要：基本入门前端掘金作者本文属于翻译文章，原文链接为。如果如何把应用放在容器中运行掘金本文适合零基础，且希望使用运行应用的人士。后端掘金使用构建网站。 nginx 基本入门 - 前端 - 掘金作者：villainthr 本文属于翻译文章，原文链接为 nginx Beginner’s Guide。是至今为止见过最好的 nginx 入门文章。额。。。没有之一。这篇教程简单介绍了 nginx ...

Shonim 2019-07-25 13:56 评论0 收藏0