跨域资源共享

字节拓月人
• 阅读 3979

1.什么是跨域资源共享

CORS(Cross-Origin Resource Sharing,跨域资源共享)就是一个站点中的资源去访问另外一个不同源站点上的资源,其基本思想,就是使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或响应是成功还是失败。

2.为什么要使用跨域资源共享

由于跨域安全策略限制,通过XHR实现ajax通信,XHR对象只能访问与包含它的页面位于同一个域中的资源。而实际应用中,通过 <link> 标签加载外部样式表文件、通过 <img> 标签加载外部图片、通过 <script> 标签加载外部脚本文件等都需要使用跨域请求。

3.CORS的实现

IE对CORS的实现
请求跨域文件

var xdr = new XDomainRequest();
xdr.onload = function(){
    alert(xdr.responseText);
};
xdr.onerror=function(){
    alert("an error occurred");
};
xdr.open("get", "http://www.baidu.com/resource/");
xdr.send();

Origin:http://www.baidu.com/resource/  //自定义头部NCZ的使用POST方法发送的请求
Access-Control-Request-Method:POST
Access-Control-Request-Method:NCZ

服务器文件
<?php

header("Access-Control-Allow-Origin:http://www.baidu.com/resource/");//允许的相应的源
header("Access-Control-Allow-Method:POST,GET");//允许的方法
header("Access-Control-Allow-Header:NCZ");//允许的头部
header("Access-Control-Max-Age:86400");//请求缓存多长时间

firefox,safari,chrome对CORS的实现

var xhr=new createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readystate==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            alert(xhr.responseText);
        }
    }else{
        alert("request was failed:"+xhr.status);
    }
};
xhr.open("get", "http://www.baidu.com/resource/");
xdr.send();

4.其他跨域技术

JSONP(JSON with Padding 填充式JSON 或参数式JSON)
SONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
例如:

<script type="text/javascript">
 function handleResponse(response){
 //处理获得的json数据
 }
</script>
<script src="http://example.com/data.php?callback=handleResponse"></script>//一个JSONP的请求

首先第一个script便签定义了一个处理数据的函数;
然后第二个script标签载入一个js文件,http://example.com/data.php 是数据所在地址,但是因为是当做js来引入的,所以http://example.com/data.php 返回的必须是一个能执行的js文件;
最后js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以php应该是这样的

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('1','2','3');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出

输出结果为:handleResponse(['1','2','3']);
jsonp是需要服务器端的页面进行相应的配合的。
图像ping
Comet
服务器发送事件
Web Sockets
SSE与Web SSockets

点赞
收藏
评论区
推荐文章
室与 室与
5年前
Cors跨域解决
一、浏览器跨域问题产生1、跨源资源共享(CORS)中文文档:https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS2、什么是浏览器跨域问题指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我
Wesley13 Wesley13
4年前
Nginx解决跨域问题(CORS)
前言CORS(CrossOriginResourceSharing)跨域资源共享,是一种允许当前域(domain)的资源(比如html/js/webservice)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(thesameoriginsecuritypolicy)浏览器会禁止这种跨域请求。 如:a.c
Wesley13 Wesley13
4年前
cors跨域之简单请求与预检请求(发送自定义请求头)
引子前后端分离这个问题,对cors的应用不断增多,暴露出的问题也接踵而至。正所谓虑一千次,不如去做一次。犹豫一万次,不如实践一次,本篇主要讨论在发送ajax请求,头部带上自定义token验证验证,暴露出的跨域问题。先说说定义CORS:跨来源资源共享(CORS)是一份浏览器技术的规范,提供了Web服务从不同网域传来沙盒脚
Wesley13 Wesley13
4年前
JAVA服务端配置允许跨域请求
CORS是一个W3C标准,全称是”跨域资源共享”(Crossoriginresourcesharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。1.加入CROS依赖的包<dependency<groupIdcom.thetransactionco
Stella981 Stella981
4年前
SpringBoot 实现前后端分离的跨域访问(CORS)
社区原文链接:http://www.spring4all.com/article/177(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.spring4all.com%2Farticle%2F177)序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域
Stella981 Stella981
4年前
Js中的跨域问题
一、什么是跨域?1.定义:跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com页面去请求www.google.com的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要协议,域名,端口有任何一
Stella981 Stella981
4年前
SpringBoot实现jsonp跨域通信
实现jsonp跨域通信实现基于jsonp的跨域通信方案原理浏览器对非同源ajax请求有限制,不允许发送跨域请求目前跨域解决方案有两种cros配置jsonp请求cros为新规范,通过一个head请求询问服务器是否允许跨域,若不允许则被拦截jso
Wesley13 Wesley13
4年前
PHP开启CORS
CORS定义CrossOriginResourceSharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了Web服务从不同域传来沙盒(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fzh.wikipedia.org%2Fwiki%2F%25E
Easter79 Easter79
4年前
SpringBoot实现jsonp跨域通信
实现jsonp跨域通信实现基于jsonp的跨域通信方案原理浏览器对非同源ajax请求有限制,不允许发送跨域请求目前跨域解决方案有两种cros配置jsonp请求cros为新规范,通过一个head请求询问服务器是否允许跨域,若不允许则被拦截jso
liam liam
2年前
解决 Axios 跨域阻碍,提高前端接口访问效率
跨域是指访问另外一个域的资源,由于浏览器的同源策略,默认情况下使用XMLHttpRequest和Fetch请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略,这是由浏览器对施加的安全限制。Axios跨域常见报错跨域请求被阻止(CrossOriginRe
ZOS对象存储跨域资源访问的实现和使用
跨域指的是从一个域名去请求另外一个域名的资源,即跨域名请求。跨域时,浏览器不能执行其他域名网站的脚本,这是由浏览器的同源策略造成的,是浏览器施加的安全限制。同源策略是一种约定,是浏览器最核心也最基本的安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,这是一个用于隔离潜在恶意文件的重要安全机制。
字节拓月人
字节拓月人
Lv1
水滴涟漪终消散,木记轮回恋此生。
文章
4
粉丝
0
获赞
0