JS跨域解决方案利用CORS实现跨域

序

跨领域是我在日常面试中经常问的问题。这个词在前端领域出现的频率并不低。主要原因是由于安全限制(同源策略，即JavaScript或Cookie只能访问同一域下的内容)。因为我们在日常的项目开发中不可避免的会需要进行跨领域的操作，所以跨领域能力也可以看作是前端工程师的基本技能之一。

和大多数跨域解决方案一样，JSONP是我的选择，但是有一天PM的需求发生了变化，需要改变某个功能来支持POST，因为传输的数据量比较大，GET格式不确定。所以大家熟知的CORS(跨产地资源共享)被折腾了很久，这里的文章也是折腾过程中的一个注解和总结。

CORS能做什么：

AJAX的正常使用会需要跨域问题的正常考虑，所以伟大的程序员已经针对跨域问题制定了一系列的解决方案，比如JSONP、flash、ifame、xhr2等等。

CORS的原则：

CORS定义了跨域访问机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用程序向另一个域提交跨域AJAX请求。这个功能的实现非常简单，服务器只需要发送一个响应头。

让我们言归正传。详情如下：

跨站点HTTP请求是指这样一个HTTP请求，其中发起请求的资源的域不同于请求所指向的资源的域。

例如，如果我通过网站A(www.a.com)中的img标签引入来自哔哩哔哩(www.b.com/images/1.jpg)的资源，那么站A将向哔哩哔哩发送跨站点请求。

这种对图片资源的跨站点请求是允许的。类似的跨站点请求包括CSS文件和JavaScript文件。

但是，如果HTTP请求是在脚本中发起的，出于安全原因，它们将受到浏览器的限制。例如，当使用XMLHttpRequest对象发起HTTP请求时，我们必须遵守相应的策略。

所谓“同源策略”是指Web应用程序只能使用XMLHttpRequest对象在原点所在的域发起HTTP请求，请求源和请求对象必须在同一个域。

比如在http://www.a.com，这个网站的协议是http，域名是www.a.com，默认端口是80。那么下面是它的同源性：

http://www.a.com/index.html同源

https://www.a.com/a.html的不同来源(不同协议)

http://service.a.com/testService/test的不同来源(不同的域名)

http://www.b.com/index.html的不同来源(不同的域名)

3358 www.a.com :8080/index . html不同的来源(不同的端口)。

为了开发更强大、更丰富的Web应用，跨域请求非常常见，那么如何在不放弃安全性的情况下进行跨域请求呢？

W3C推荐了一种新的机制，即跨来源资源共享(CORS)。

跨来源资源共享(CORS)通过客户端-服务器合作声明来确保请求的安全性。服务器将添加一系列HTTP请求参数(如访问控制-允许-起源等)。)添加到HTTP请求头，以限制哪些域请求和哪些请求类型是可接受的。当客户端发起请求时，它必须声明自己的源(Orgin)，否则服务器将不会处理它。如果客户端不声明，请求甚至会被浏览器直接拦截，无法到达服务器。收到HTTP请求后，服务器会比较域，只处理同域的请求。

使用CORS的跨域请求示例；

客户：

函数GetHello(){ var xhr=new XMLHttpRequest()；xhr.open('post '，' http://b.example.com/Test.ashx '，true)；xhr . setrequestheader(' Content-Type '，' application/x-www-form-URL encoded ')；//声明请求源xhr.setrequestheader ('origin '，' http://a . example.com ')；xhr . onreadystatechange=function(){ if(xhr . readystate==4 xhr . status==200){ var responseText=xhr . responseText；console . info(responseText)；} } xhr . send()；}服务器：

公共类test : IHttpHandler { public void process request(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；//声明接受所有域的请求语境。响应。添加标题('访问控制-允许-来源',' * ');语境。回应。写('你好世界');} public bool IsReuse { get { return false；}}}在应用程序接口中启用跨域访问

克-奥二氏分级量表是服务端和客户端协作声明来确保请求安全的，因此，如果需要在应用程序接口中启用克-奥二氏分级量表也需要进行相应配置。好在微软的ASP .网团队提供了官方的支持跨域的解决方案，只需要在框架中添加即可。

然后在App_Start/WebApiConfig.cs进行如下配置即可实现跨域访问：

公共静态类WebApiConfig {公共静态void Register(HttpConfiguration config){//Web API配置和服务//将应用程序接口配置为仅使用不记名令牌身份验证配置suppresdefaulthostauthentication()；配置。筛选器。添加新的主机身份验证筛选器(OAuthDefaults .AuthenticationType))；//Web API路由配置maphttpattributorates配置路线。MapHttpRoute(名称： ' DefaultAPI '，route templates : ' API/{ controller }/{ id } '，默认值3360 new { id=RouteParameter .可选});//允许应用程序接口跨域访问EnableCrossSiteRequests(配置);配置格式化程序。jsonformatter。支持的媒体类型。添加(新的MediaTypeHeaderValue(' text/html ')；}私有静态void enablecrossiterequests(HttpConfiguration config){ var CORS=new enablecorattribute(origin s : ' *，headers: '*，methods : ' *)；配置使能CORS(CORS)；}}由于IE10以下浏览器不支持CORS，所以目前在国内克-奥二氏分级量表并不是主流的跨域解决方案，但是随着windows 10的发布，IE的逐渐衰落，可以预见，在不远的将来克-奥二氏分级量表将成为跨域的标准解决方案。

以上所述是小编给大家介绍的射流研究…跨域解决方案之使用克-奥二氏分级量表实现跨域，希望对大家有所帮助！