美文网首页
前端如何去做跨域解决方案

前端如何去做跨域解决方案

作者: beijixing_233 | 来源:发表于2019-04-10 23:57 被阅读0次

跨域问题的产生背景

早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性。
所谓同源策略:即域名、端口、协议相同,才能互相获取对应的资源,在同源策略下,域名A可以获取域名B下的脚本,图片等,但不能发送ajax请求,也不能操作Cookie、LocalStorage等数据。同源策略的存在,一方面提高了网站的安全性,但同时在面对前后端分离、模拟测试等场景时,也带来了一些麻烦。

跨域是由于浏览器的同源策略产生的,所以服务器不受影响。

JS跨域

指的是在浏览器端利用浏览器的一些特性进行hack处理,从而避开同源策略的限制。

常用的方法是JSONP
由于同源策略不会阻止动态脚本的插入到文档中去,所以催生出了一种很常用的跨域方式: JSONP。

原理:在域名a.com获取b.com的数据,我们动态插入来源于b.com的脚本;

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.b.com/getdata?callback=demo';
这里,我们利用动态脚本的src属性,变相地发送了一个http://www.b.com/getdata?callback=demo的GET请求。这时候,b.com页面接受到这个请求时,如果没有JSONP,会正常返回json的数据结果,像这样:

{ msg: 'helloworld' }

而利用JSONP,服务端会接受这个callback参数,然后用这个参数值包装要返回的数据:

demo({msg: 'helloworld'});

这时候,如果a.com的页面上正好有一个demo 的函数:

function demo(data) {
console.log(data.msg);
}

当远程数据一返回的时候,随着动态脚本的执行,这个demo函数就会被执行,从而拿到了b.com的数据。

到这里,你应该能明白这个技术为什么叫JSONP了吧?就是因为使用这种技术服务器会接受回调函数名作为请求参数,并将JSON数据填充进回调函数中去。

服务器跨域

在实践过程中,一般我们喜欢让服务器来多做一些处理,从而尽可能让前端简化。
这里将介绍两种常用的方法:反向代理和CORS。

反向代理:一般我们会用nginx作为web服务器,通过简单的设置即可实现代理。

CORS : "跨域资源共享"(Cross-origin resource sharing)是W3C出的一个标准。
未完,待续...

相关文章

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

  • 前端如何去做跨域解决方案

    跨域问题的产生背景 早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性。所谓同...

  • 老生常谈——图解3种跨域解决方案

    没有纯前端的跨域解决方案,遇到跨域,请找后端协商方案! 什么是跨域? 同源策略限制从一个源加载的文档或脚本如何与来...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • 跨域

    博客 说说跨域那些事儿 不要再问我跨域的问题了 前端常见跨域解决方案(全) 同源策略 JSONP(填充式JSON)...

  • 前端常见跨域解决方案(全)

    前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的...

  • js常见跨域解决方案

    参考:前端常见跨域解决方案(全) 跨域,什么是“域”? 这里就要先说说同源策略了。所谓同源是指"协议+域名+端口"...

  • 跨源网络访问

    链接:浏览器的同源策略链接:跨域资源共享链接:跨域共享数据的十种方法链接:前端跨域问题及其解决方案 广义的跨域:1...

  • 跨域问题整理

    跨域问题在前端在经常碰到,看到的比较好的解决方案如下:1、CORS(跨域资源共享)解决方案http://www.c...

  • 前端不同的跨域方案总结

    做个收录,方便以后复盘。本文转自:前端常见跨域解决方案(全)。 什么是跨域? 跨域是指一个域下的文档或脚本试图去请...

网友评论

      本文标题:前端如何去做跨域解决方案

      本文链接:https://www.haomeiwen.com/subject/zunaiqtx.html