当前位置:首页 > 前端 > 正文内容

什么是跨域访问,如何实现跨域?

xuwenyan11个月前 (01-10)前端139

什么是跨域请求?

在 HTML 中,<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax 都可以指向一个资源地址,而所谓的跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念:我们认为若协议 + 域名 + 端口号均相同,那么就是同域。

同源策略(Same-origin Policy)

同源策略是一种约定,它是浏览器最核心也最基本的安全功能。以下特征被称之为同源

同源策略有两种限制,第一种是限制了不同源之间的请求交互,例如在使用XMLHttpRequest 或 fetch 函数时则会受到同源策略的约束。 第二个限制是浏览器中不同源的框架之间是不能进行js的交互操作的。比如通过iframe和window.open产生的不同源的窗口。这两种限制都有不同的解决方案,下面会讲解不同的解决方案和可能产生的安全问题。

  • 同协议 如:https://exp.org 与 http://exp.org 不同源

  • 同端口 如:http://exp.org 与 http://exp.org:8080 不同源

  • 同域名 如:http://aaa.org 与 http://bbb.org 不同源

同源策略有两种限制,第一种是限制了不同源之间的请求交互,例如在使用XMLHttpRequest 或 fetch 函数时则会受到同源策略的约束。 第二个限制是浏览器中不同源的框架之间是不能进行js的交互操作的。比如通过iframe和window.open产生的不同源的窗口。这两种限制都有不同的解决方案,下面会讲解不同的解决方案和可能产生的安全问题。

跨域请求有什么隐患?

通常浏览器会对跨域请求作出限制。浏览器之所以要对跨域请求作出限制,是出于安全方面的考虑,因为跨域请求有可能被不法分子利用来发动 CSRF攻击( 跨站请求攻击 )。

跨站请求攻击,简单地说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作(如发邮件,发消息,甚至财产操作如转账和购买商品)。由于浏览器曾经认证过,所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞:简单的身份验证只能保证请求发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的

JSONP实现跨域

原理:

  • JSONP 是一种非官方的跨域数据交互协议

  • SONP 的理念就是,与服务端约定好一个回调函数名,服务端接收到请求后,将返回一段 Javascript,在这段 Javascript 代码中调用了约定好的回调函数,并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后,就会执行这个回调函数,这时数据已经成功传输到客户端了。

  • JSONP 本质上是利用 <script><img><iframe> 等标签不受同源策略限制,可以从不同域加载并执行资源的特性,来实现数据跨域传输。

  • JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

示例:

// Using YQL and JSONP
$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",
 
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    // Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

优缺点:

JSONP 的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行。

JSONP 的缺点是:它只支持 GET 请求,而不支持 POST 请求等其他类型的 HTTP 请求

CORS实现跨域

在跨域请求中使用了非默认的 MethodsContent-TypeHeaders 浏览器会首先发起一个OPTIONS方法的请求,来验证是否通过。

允许跨域请求的方法

浏览器默认允许跨域请求的方法只有 GET HEAD POST,需要添加更多方法则需要在服务端添加 Access-Control-Allow-Methods

 'Access-Control-Allow-Methods':'DELETE, PUT ' //允许所有站点跨域请求,也可以设置成某一个具体站点

允许跨域请求的Content-Type

浏览器默认允许跨域请求的Content-Type 只有 text/plain multipart/form-data application/x-www-form-urlencoded

自定义请求头

如果在请求方法中添加了自定义请求头,如果服务端没有对相应的头进行 Access-Control-Allow-Heards 的设置,则客户端会报跨域的错误

 'Access-Control-Allow-Heards':'X-Test-Cors' //X-Test-Cors 为自定义的请求头

Access-Control-Max-Age 允许预请求的时间。

'Access-Control-Max-Age':'1000'

在1000s内经过预请求的MethodsContent-TypeHeaders不需要再重新预请求验证

    文章作者:xuwenyan
    版权声明:本文为本站原创文章,转载请注明出处,非常感谢,如版权漏申明或您觉得任何有异议的地方欢迎与本站取得联系。

    扫描二维码推送至手机访问。

    版权声明:本文由艺文笔记发布,如需转载请注明出处。

    本文链接:https://www.xuwenyan.com/archives/2387

    分享给朋友:

    “什么是跨域访问,如何实现跨域?” 的相关文章

    分享几个 HTML5 非常惊艳的动画 demo

    分享几个 HTML5 非常惊艳的动画 demo

    在知乎上看到别人分享的几个动画demo,个人感觉非常炫酷,于是记录一下。可惜的是作者并没提供动画源代码,只能是观摩一下了!!!demo动画链接如下: FBI作战部署系统 3D粒子旋转 黑客数字雨 百家姓暗号解析 撕衣服 3D元素周期表 时钟特效...

    常用的html转义符对照表大全

    常用的html转义符对照表大全

    常用的html转义符对照表大全 目录 常用的字符转义HTML特殊转义字符列表数学和希腊字母标志重要的国际标记JavaScript 转义符 常用的字符转义 显示说明|实体名称|实体编号|半方大的空白|&ensp;|&#8194;|全方大的空白|&ems...

    ipad在ios13修改了ipad浏览器的userAgent,导致设备类型判断错误。

    ipad在ios13修改了ipad浏览器的userAgent,导致设备类型判断错误。

    最近发现一个问题,想根据设备的类型来展示不同的主题风格,但根据网上的判断方法添加完代码之后,别的设备都正常,就是在ipad上面判断为了pc设备,让我相当郁闷。经过多出查询资料,最终总结如下: 这个问题是如何导致的? 我们一般是通过浏览器的userAgent来判断设备类型的,但是在ipa...

    JavaScript判断是移动设备还是pc设备, JavaScript判断浏览器类型。

    JavaScript判断是移动设备还是pc设备, JavaScript判断浏览器类型。

    JavaScript判断是移动设备还是pc设备 if (browser.versions.mobile) { var ua = navigator.userAgent.toLowerCase();//获取判断用的对象 if (ua.match(/Micro...

    javascript实现解析网页(html)

    javascript实现解析网页(html)

    javascript如何实现解析网页(html) demo代码如下: var parser = new DOMParser(); var html_dom = parser.parseFromString(html_content, 'text/html'); var els =...