JS跨域解决方案之使用CORS实现跨域


Posted in Javascript onApril 14, 2016

引言

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

和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定。所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource Sharing),这边文章也就是折腾期间的小记与总结。

•CORS能做什么:

正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。

• CORS的原理:

CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。

下面我们步入正题具体详情如下所示:

跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求。

比如说,我在Web网站A(www.a.com)中通过<img>标签引入了B站的资源(www.b.com/images/1.jpg),那么A站会向B站发起一个跨站请求。

这种图片资源的跨站请求是被允许的,类似的跨站请求还有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 不同源(域名不同)

•http://www.a.com:8080/index.html 不同源(端口不同)

为了开发出更强大,更丰富的Web应用,跨域请求是很常见的,那么如何在不舍弃安全的情况下进行跨域请求呢?

W3C推荐了一种新的机制,即跨源资源共享(Cross-Origin Resource Sharing (CORS))。

跨源资源共享(CORS)是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等),来限制哪些域的请求和哪些请求类型可以接受,而客户端在发起请求时必须声明自己的源(Orgin),否则服务器将不予处理,如果客户端不作声明,请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较,只有同域的请求才会处理。

一个使用CORS实现跨域请求的示例:

客户端:

function getHello() {
var xhr = new XMLHttpRequest();
xhr.open("post", "http://b.example.com/Test.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
// 声明请求源
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();
}

服务端:

public class Test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 声明接受所有域的请求
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}

在Web API中启用跨域访问

CORS是服务端和客户端协作声明来确保请求安全的,因此,如果需要在Web API中启用CORS也需要进行相应配置。好在微软的ASP.NET团队提供了官方的支持跨域的解决方案,只需要在NuGet中添加即可。

JS跨域解决方案之使用CORS实现跨域

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

public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服务
// 将 Web API 配置为仅使用不记名令牌身份验证。
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
// 允许Web API跨域访问
EnableCrossSiteRequests(config);
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
private static void EnableCrossSiteRequests(HttpConfiguration config) {
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*"
);
config.EnableCors(cors);
}
}

由于IE10以下浏览器不支持CORS,所以目前在国内CORS并不是主流的跨域解决方案,但是随着windows 10的发布,IE的逐渐衰落,可以预见,在不远的将来CORS将成为跨域的标准解决方案。

以上所述是小编给大家介绍的JS跨域解决方案之使用CORS实现跨域,希望对大家有所帮助!

Javascript 相关文章推荐
js function使用心得
May 10 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js获取滚动距离的方法
May 30 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
vue跨域解决方法
Oct 15 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 #Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 #Javascript
原生js编写autoComplete插件
Apr 13 #Javascript
JS中的eval 为什么加括号
Apr 13 #Javascript
jQuery操作属性和样式详解
Apr 13 #Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 #Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 #Javascript
You might like
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
谈谈python中GUI的选择
2018/03/01 Python
对Python3 序列解包详解
2019/02/16 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
服装电子商务创业计划书
2014/01/30 职场文书
行政人事岗位职责
2014/03/17 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
市场营销计划书范文
2015/01/16 职场文书
交通事故和解协议书
2015/01/27 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
浅析JavaScript中的变量提升
2022/06/01 Javascript