首页 > 其他分享 >跨域 解决办法:利用 Access-Control-Allow-Origin

跨域 解决办法:利用 Access-Control-Allow-Origin

时间:2024-02-22 13:11:04浏览次数:24  
标签:Control Origin 请求 Access Allow 跨域

ASP.NET中Web API解决跨域问题

https://www.jb51.net/article/240038.htm

 

传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing)。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求。

 

 

在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息。

 

Access-Control-Allow-Origin 所有域名设置:

Access-Control-Allow-Origin:*     #则允许所有域名的脚本访问该资源。

 

Access-Control-Allow-Origin 单个域名设置:

Access-Control-Allow-Origin:https://www.fujieace.com    #允许特定的域名访问。

 

Access-control-Allow-Origin 多个域名设置:

很多人认为直接按照以下这样写就可以了,其实是错误的,因为Access-Control-Allow-Origin只允许一个值;逗号分隔多个值是行不通的。

Access-Control-Allow-Origin: https://www.google.com,https://www.baidu.com 

于是换种方式,查资料得到一个这样的思路:先自己判断域名是否是允许的,如果是再设置允许跨域访问。那么这样就可以了。Node.js多域名跨域代码如下:

app.all(‘*’, function(req, res, next) { 
if( req.headers.origin == ‘https://www.google.com’ || req.headers.origin == ‘https://www.baidu.com’ ){ 
res.header(“Access-Control-Allow-Origin”, req.headers.origin); 
res.header(‘Access-Control-Allow-Methods’, ‘POST, GET’); 
res.header(‘Access-Control-Allow-Headers’, ‘X-Requested-With’); 
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’); 
} 
next(); 
}); 

使用时可以把允许访问的域名写成一个数组,然后JS写一个比较字符串是否在数组内的函数,这样使用就比较方便了。其中:

Access-Control-Allow-Origin 就是我们需要设置的域名。

Access-Control-Allow-Methods 是允许的请求方式。

Access-Control-Allow-Headers 跨域允许包含的头。

 

PHP跨域例子,只需PHP添加响应头信息:

header("Access-Control-Allow-Origin: *");

 

Cross-Origin Resource Sharing协议介绍

传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染。

 

在Flash和Silverlight中,服务器需要创建一个crossdomain.xml的文件来允许跨域请求。如果这个文件声明“http://your.site”允许来自“http://my.site”的请求,则来自“http://my.site”的请求可以访问所有“http://your.site”的文件。这是一种整个站点层面上的控制模式,要么你允许一个外域的站点访问,要么拒绝。

 

COR不一样,它是页面层次的控制模式。每一个页面需要返回一个名为‘Access-Control-Allow-Origin’的HTTP头来允许外域的站点访问。你可以仅仅暴露有限的资源和有限的外域站点访问。在COR模式中,访问控制的职责可以放到页面开发者的手中,而不是服务器管理员。当然页面开发者需要写专门的处理代码来允许被外域访问。

 

另外一个主要的区别是,某个站点的crossdomain.xml文件是最早被浏览器获取并分析的。如果一个外域的站点不允许被访问,浏览器压根就不会发出跨域请求。

 

COR则相反,Javascript先发出跨域请求,然后检查回复的‘Access-Control-Allow-Origin’头。如果这个头允许该外域访问,则Javascript可以读取这个回复,否则就被禁止访问。如果请求不是一个简单的COR,则向外域服务器发送预检验请求,如果回复的头部允许访问,则发送跨域请求,否则禁止。

 

COR的实现标准就是CORS协议。

对于浏览器来说,COR请求都是Javascript发起的,COR请求有两种:

1、简单的COR请求,它可以直接向外域资源发起请求。它必须仅仅包含简单的方法和头,具体定义看[2] 6.1。

2、如果COR包含复杂的方法和头,它需要发出预检验(Preflight)请求,它先向资源服务器发出一个OPTIONS方法、包含“Origin”头的请求。该回复可以控制COR请求的方法,HTTP头以及验证等信息。只有该请求获得允许以后,才会发起真实的外域请求。

 

下面是一个简单的COR请求:

<script language="Javascript" type="text/javascript">
var client = new XMLHttpRequest();
client.open("GET", "http://bar.org/b")
client.onreadystatechange = function() { /* do something */ }
client.send()
</script>

假设这个请求所在页面的域是“http://foo.org”。 如果来自“http://bar.org/b”的回复包含这样的头:

Access-Control-Allow-Origin: http://foo.org

则表明,它允许来自“http://foo.org”的跨域请求。

 

下面的Javascript会发出预检验请求和真实请求:

<script language="Javascript" type="text/javascript">
var client = new XMLHttpRequest();
client.open("GET", "http://bar.org/b")
client.setRequestHeader('Content-Type','text/html')
client.onreadystatechange = function() { /* do something */ }
client.send()
</script>

由于“Content-type: text/html”不是一个简单的头,它会先向"http://bar.org/b"发出一个OPTIONS的HTTP请求。 回复可能包含这样的头:

Access-Control-Allow-Origin: http://foo.org
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET,PUT, DELETE
Access-Control-Allow-Headers: content-type
"Access-Control-Allow-Origin" 表明它允许"http://foo.org"发起跨域请求
"Access-Control-Max-Age" 表明在3628800秒内,不需要再发送预检验请求,可以缓存该结果
"Access-Control-Allow-Methods" 表明它允许GET、PUT、DELETE的外域请求
"Access-Control-Allow-Headers" 表明它允许跨域请求包含content-type头

如果预检验请求获得通过,接下来Javascript就会发起真实的COR请求,过程跟简单的COR请求类似。

 

CORS协议的实现

现在HTML5的标准如火如荼的在制定和发展中,CORS作为HTML5的一部分,在大部分现代浏览器中有所支持,支持(部分支持)CORS协议的浏览器有IE8+, Firefox5+, Chrome12+, Safari4+

 

服务端实现

Thinktecture.IdentityModel 这个库已经为我们的WebAPI,MVC的项目做好了支持,具体参看[6]。

 

参考资料:

[1] 、http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

[2] 、http://www.w3.org/TR/cors/

[3]、https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

[4]、http://www.cnblogs.com/yoyiorlee/archive/2010/11/07/1871308.html

[5]、http://restfulobjects.codeplex.com/wikipage?title=Cross%20Origin%20Resource%20Sharing&referringTitle=Documentation

[6]、https://brockallen.com/2012/06/28/cors-support-in-webapi-mvc-and-iis-with-thinktecture-identitymodel/

标签:Control,Origin,请求,Access,Allow,跨域
From: https://www.cnblogs.com/wzihan/p/18027104

相关文章

  • 多个@RestControllerAdvice全局异常捕获器的顺序问题
    影响一多个捕获器按照加载顺序执行,可以通过@Order注解控制加载顺序,值越小的越先加载,如@Order(Ordered.HIGHEST_PRECEDENCE)最先执行。同时可以在捕获器中加入静态代码块打印日志判断加载顺序,如:static{log.info("GlobalExceptionHandlerclasshasbeenloaded.");......
  • CORS就是跨域吗?
    首先,跨域的域是什么?跨域的英文是:Cross-Origin。Origin 中文含义为:起源,源头,出生地。在跨域中,"域"指的是一个Web资源(比如网页、脚本、图片等)的源头。包括该资源的协议、主机名、端口号。在同源策略中,如果两个资源的域相同,则它们属于同一域,可以自由进行交互和共享数据。反之......
  • c#使用webView2 访问本地静态html资源跨域问题 || Cors
    背景在浏览器中访问本地静态资源html网页时,可能会遇到跨域问题如图。 是因为浏览器默认启用了同源策略,即只允许加载与当前网页具有相同源(协议、域名和端口)的内容。WebView2默认情况下启用了浏览器的同源策略,即只允许加载与主机相同源的内容。所以如果我们把静态资源发布到ii......
  • 跨域问题
    文章目录前言一、为什么会跨域1.什么是源2.URL结构3.同源不同源举......
  • because it set 'X-Frame-Options' to 'sameorigin'
    报错becauseitset'X-Frame-Options'to'sameorigin'.Refusedtodisplay'https://xxx.xxx.cn/'inaframebecauseitset'X-Frame-Options'to'sameorigin'.解决方法:修改页面,增加meta配置<head><!--CSP......
  • 跨域问题
    1,概念跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。跨域问题的产生是由于浏览器的同源策略。同源策略(Same-OriginPolicy)是一种浏览器安全策略,用于限制在浏览器中加载的网页脚本与来自不同源的资源进行交互。同源指的是协议(如......
  • 跨域问题解决
    跨域举例A网站部署在localhost:63343请求loocalhost:8080/api/user/add,就会出现跨域问题。同源策略同源策略:协议,主机,端口,只有这三者全部相同时,才可以相互访问。现在接口地址为101.10.11.1X:8081,请判断以下哪些可以通过:访问地址描述结果https://127.0.0.1:808......
  • 跨域传文件时 如何确保数据安全可控传输共享?
    跨域传文件指的是在不同的域(Domain)之间安全地传输文件,这通常涉及到安全域、组织域、不同地理位置域之间。在跨域数据文件共享过程中,既要保障合法用户的正常阅读文件,又要防范在传播过程中的不可控,敏感文件的机密性受到极大挑战,如何防范敏感文件泄露,保护关键数据资产成为各组织的......
  • 【转】【WPF】HandyControl调整样式色系
    资源引用以案例项目App.xaml作为系统资源入口,存在如下关系App.xaml:<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary><ResourceDictionary.......
  • [971] [Keep original formats] Combine multiple Excel files into one Excel file w
    IftheexistingExcelfilehasspecialformattingthatpreventsreadingitdirectlywithPandas,youcanusealibrarylikeopenpyxltohandletheappendingofnewsheets.Here'showyoucanachievethis:importosfromopenpyxlimportload_workbook......