JavaScript 跨域问题

一、什么是跨域

跨域 (Cross-origin resource sharing, CORS) 是指在浏览器中,同源策略限制了来自不同域的脚本对每个网络资源的访问权限。

同源策略限制了一个网页脚本只能访问来自同一来源的网络资源。来源由协议,域名和端口号组成。如果协议,域名或端口不同,就视为不同的源。

跨域资源共享(CORS)是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个origin (domain)的web应用被准许访问来自不同源的指定的资源。

对于跨域请求,浏览器会在请求头中加入 Origin 字段,服务器根据这个字段来判断是否允许跨域访问。如果服务器允许,则在响应头中加入 Access-Control-Allow-Origin 字段。

对于简单请求(simple request),只会发送一个OPTIONS请求作为预检请求,询问服务器是否允许发送真正的请求。对于非简单请求(non-simple request),在发送真正的请求之前会先发送一个OPTIONS请求作为预检请求。

二、如何解决跨域问题

可以通过使用 JSONP ,CORS, 代理服务器 或者 WebSocket 等方式来解决跨域问题。

1、通过使用 JSONP 解决

JSONP (JSON with Padding) 是一种解决跨域问题的技术,它允许网页从不同源加载脚本。这样就可以通过动态创建 <script> 标签来加载并执行来自不同域名的 JavaScript。

具体来说,JSONP 使用了一个 callback 参数来告诉服务器应该返回一个 JavaScript 函数调用,而不是普通的 JSON 数据。

例如,如果想要请求一个名为 example.com 的网站的数据,可以这样实现:

function jsonpCallback(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/data?callback=jsonpCallback';
document.body.appendChild(script);

服务器收到请求后,会返回一个 JavaScript 函数调用,如 jsonpCallback({"name":"value"})。浏览器会把这个函数调用当作 JavaScript 代码执行,从而获取到服务器的数据。

在使用 JSONP 时,还需要注意几点:

  • JSONP 只能用于发送 GET 请求,因此不能用于发送 POST、PUT、DELETE 等其他类型的请求。
  • JSONP 不能设置请求头,因此不能用于认证或授权相关的请求。
  • JSONP 需要服务器端配合才能工作,因此不能用于请求不支持 JSONP 的服务器。
  • JSONP 可能会导致安全问题,因为它会在当前页面执行来自未知来源的代码。因此需要谨慎使用 JSONP,并对来自未知来源的数据进行验证。

由于以上限制,JSONP 已经被越来越少的人使用,越来越多的人使用 CORS 或者 WebSocket 等其他方法来解决跨域问题。

2、通过配置服务器端解决(即 CORS)

可以通过以下方式来解决跨域问题:

  • 使用 Access-Control-Allow-Origin 头允许特定域名访问资源
  • 使用 Access-Control-Allow-Credentials 头允许带上凭据(cookies)访问资源
  • 使用 Access-Control-Allow-Methods 头允许特定的 HTTP 方法访问资源
  • 使用 Access-Control-Allow-Headers 头允许特定的请求头访问资源
  • 使用 Access-Control-Max-Age 头预检请求的有效期

这些方法都可以在服务器端配置,从而解决跨域问题。

需要注意的是,如果使用了 Access-Control-Allow-Origin 头来允许特定域名访问资源,那么当此值设为 * 时,所有域都能访问该资源,这可能会带来安全隐患,因此应该谨慎使用。

当浏览器发送跨域请求时,会先发送一个预检请求(OPTIONS),服务器收到预检请求后,会返回一些头信息,浏览器根据这些头信息来判断是否可以发送正式请求。

CORS 比 JSONP 更加灵活,支持所有类型的 HTTP 请求,并且可以设置请求头,因此越来越受欢迎。但是,CORS 依赖于浏览器的支持,而且需要在服务器端进行配置才能使用。

3、通过使用代理服务器解决

使用代理服务器也可以解决跨域问题,客户端向代理服务器发送请求,代理服务器再向目标服务器发送请求,并将目标服务器返回的结果返回给客户端。这样就可以避免浏览器的同源策略限制。

4、通过使用 WebSocket 解决

使用 WebSocket 也可以解决跨域问题,WebSocket 是 HTML5 中新增的一种在单个 TCP 连接上进行全双工通讯的协议。它的特点是建立在 TCP 上,而不是建立在 HTTP 之上,因此可以避免跨域限制。

 

总之,解决跨域问题有很多种方法,每种方法都有其优缺点,应该根据具体情况来选择最合适的方法。

作者:yuzhihui
出处:http://www.cnblogs.com/yuzhihui/ 声明:欢迎任何形式的转载,但请务必注明出处!!!
本文转载于网络 如有侵权请联系删除

相关文章

  • 必看 | github网红收集的48个常用JavaScript代码片段

    前端爱好者的知识盛宴该项目来自于Github用户Chalarangelo,目前已在Github上获得了5000多Star,精心收集了...多达48个有用的JavaScript代码片段!该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法,来看看这些JavaScript代码都传达出了什么吧!Anagramsofstring(带有重复项)使用递归。对于给定字符串中的每个字母,为字母创建字谜。使用map()将字母与每部分字谜组合,然后使用reduce()将所有字谜组合到一个数组中,最基本情况是字符串长度等于2或1。constanagrams=str=>{  if(str.length<=2)returnstr.length===2?[str,str[1]+str[0]]:[str];  returnstr.split('').reduce((acc,letter,i)=>   acc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=>letter+val)),[])

  • 转转搭建 iconfont 平台实践

    背景 icon的管理是设计稿转代码过程中,重要但容易被忽视的环节。所以在实际的业务代码中icon问题的解决方案往往也是八仙过海,能用就行。比如导出为png,svg格式的文件,在项目中作为静态资源直接引用,或者上传到CDN作为外链引用。显然这些方案多少都存在着一些小问题:在用户体验上,包括在高分辨率屏幕上显示模糊、增加额外的http请求、异步加载造成页面抖动等;在开发体验上,包括无法通过CSS控制样式以便和文本保持一致、难以复用和更新等。为了解决上述问题,规范一点的做法是把设计稿icon转换成iconfont字符集,在项目中导入字体文件使用。对于初创团队而言,淘宝免费的`iconfont`[1]网站无疑是快速的解决方案:上传icon——生成项目——一键下载,非常方便。然而有几个问题阻碍了它成为企业级的解决方案:一个是项目间无关联,相同icon无法复用和统一更新;一个是无法强绑定企业账户,在团队协作和人员更迭交接时不可控;最后一个是icon的版权问题,所有人都可以免费使用所有人上传到平台的icon,这可能不是公司所希望的。所以上述的解决方式在项目初期可能确实可以快速解决问题,但随着业务复杂

  • Python贪吃蛇小游戏_完整源码免费分享

    文章目录Python贪吃蛇小游戏1.导包2.配置初始化参数3.主函数及运行主体4.画食物的函数5.画贪吃蛇的函数6.画网格的函数(非必选,觉得多余的可以忽略此项)7.操纵贪吃蛇移动的函数8.判断蛇是否死亡的函数9.判断蛇是否吃到食物的函数10.随机生成食物11.游戏开始与结束的相关配置12.函数俱备,只欠main这个东风了 今天给大家免费分享一下Python飞机游戏的源码。 Python贪吃蛇小游戏(声明:本文使用的源码非原创,17年在CSDN上用币下载的资源,具体是哪位大佬的忘记了) 在此之前首先说一下环境 Python3.X(使用2.x的大佬自己稍微改动一下就行) pygame1.9.6(当然这个没必要和我一样)1.导包##导入相关模块 importrandom importpygame importsys frompygame.localsimport*复制2.配置初始化参数snake_speed=15#贪吃蛇的速度 windows_width=800 windows_height=600#游戏窗口的大小 cell_size=20#贪吃蛇身体方块大小,注意身体大小必须能被窗口长

  • Python告诉你:粽子甜咸之争谁胜出?吃货最爱买谁家的粽子?

    CDA数据分析师出品作者:Mika数据:真达后期:泽龙【导语】:今天我们来聊聊粽子,Python分析部分请看第三部分。公众号后台,回复关键字“粽子”获取完整数据。Showmedata,用数据说话今天我们聊一聊粽子点击视频,先睹为快又到一年端午节,作为中华民族的传统节日,传说粽子是为祭奠投江的屈原而传承下来的,如今吃粽子也成了端午的主要习俗之一。除了商场出售的琳琅满目的粽子,各家各户的妈妈和奶奶们也纷纷浸糯米、洗粽叶、包粽子。粽子的包法和形状也很有讲究,除了常见的三角粽、四角粽,还长粽、塔型粽和牛角粽等等。说到粽子的口味就更多了。粽子几乎每年都会引发咸甜之争,有句话说的是——吃货不分南北,口味必分甜咸。北方人吃粽子偏爱甜口,多以红枣、豆沙做馅,少数也采用果脯为馅,蘸白糖或红糖食用;而南方青睐咸口,口味有咸肉粽、咸蛋黄粽、板栗肉粽、腊肉香肠粽、火腿粽、虾仁粽等等。那么哪家的粽子买得最好?大家都普遍喜欢什么口味?今天我们就用数据来盘一盘端午的粽子。本文要点:粽子甜咸之争,自己包粽子选什么料?吃货的力量,全网粽子谁家卖的最好?01粽子“甜咸之争”自己包粽子选什么料? 自己家包的粽子,永远是最好

  • [红日安全]代码审计Day2 - filter_var函数缺陷

    本文由红日安全成员:七月火编写,如有不当,还望斧正。前言大家好,我们是红日安全-代码审计小组。最近我们小组正在做一个PHP代码审计的项目,供大家学习交流,我们给这个项目起了一个名字叫PHP-Audit-Labs。现在大家所看到的系列文章,属于项目第一阶段的内容,本阶段的内容题目均来自PHPSECURITYCALENDAR2017。对于每一道题目,我们均给出对应的分析,并结合实际CMS进行解说。在文章的最后,我们还会留一道CTF题目,供大家练习,希望大家喜欢。下面是第2篇代码审计文章:Day2-Twig题目叫做Twig,代码如下:漏洞解析:这一关题目实际上用的是PHP的一个模板引擎Twig,本题考察XSS(跨站脚本攻击)漏洞。虽然题目代码分别用了escape和filter_var两个过滤方法,但是还是可以被攻击者绕过。在上图第8行中,程序使用Twig模板引擎定义的escape过滤器来过滤link,而实际上这里的escape过滤器,是用PHP内置函数htmlspecialchars来实现的,具体可以点击这里了解escape过滤器,htmlspecialchars函数定义如下:htmlspe

  • java知识点总结

    趁着周末,写下一篇文章,写到这都不知道怎么去说了,写文章确实很考验一个人,想说的不能都写在网络上,以免误导别人。刚在网上搜索图片,也没有找到一个免费的无水印的网站,就在自己的相册找了一张图片,有什么好的图片网站,欢迎推荐哈,好了,进入正题,我们今天谈下java中需要了解的性能优化。性能优化:如何优化?为什么需要优化?值不值得优化?这是我们需要思考的几点。优化的目的是为了让程序运行的效率更高,减少程序代码占用整个项目的体积,说到这,项目的代码尽可能重用已有的函数,方法。 尽量重用对象,特别是String对象的使用,出现字符串连接时应该使用StringBuilder/StringBuffer代替。因为对象的创建和销毁都要借助于虚拟机来实现,由于java虚拟机不仅要花时间来生成对象,当生成的对象不再使用时,以后可能还需要花时间对这些对象进行垃圾回收和处理,因此,生成过多的对象将会给程序的性能带来很大的影响。尽可能使用局部变量,调用方法时传递的参数,以及在调用中创建的临时变量都保存在栈中速度较快。相比较于在堆中开辟内存空间,速度快,其它变量,如静态变量,实例变量等都在堆中创建,速度较慢,另外,

  • CAP原则

    介绍CAP原则是NOSQL数据库的基石。Consistency(一致性)。Availability(可用性)。Partitiontolerance(分区容错性)。理论分布式系统的CAP理论:理论首先把分布式系统中的三个特性进行了如下归纳: ●一致性(C):在分布式系统中的所有数据备份,在同一时刻是否同样的值。(等同于所有节点访问同一份最新的数据副本)●可用性(A):在集群中一部分节点故障后,集群整体是否还能响应客户端的读写请求。(对数据更新具备高可用性)●分区容错性(P):以实际效果而言,分区相当于对通信的时限要求。系统如果不能在时限内达成数据一致性,就意味着发生了分区的情况,必须就当前操作在C和A之间做出选择。与可用的决择CAP理论就是说在分布式存储系统中,最多只能实现上面的两点。而由于当前的网络硬件肯定会出现延迟丢包等问题,所以分区容忍性是我们必须需要实现的。所以我们只能在一致性和可用性之间进行权衡,没有NoSQL系统能同时保证这三点。对于web2.0网站来说,关系数据库的很多主要特性却往往无用武之地1.数据库事务一致性需求   很多web实时系统并不要求严格的数据库事务,对读一致

  • 企业面试题: cookies,sessionStorage 和 localStorage 的区别?

    企业面试题:cookies,sessionStorage和localStorage的区别?考核内容:脚本中的缓存操作题发散度:★★★试题难度:★★★ 【友情提示:舒克老湿意在为各位准备从事前端工程师岗位的小伙伴提供思路,所有代码仅供参考,切勿背题!!理解问题以及提高自己解决问题的能力最为重要!如果你有更好的解决思路,或者有什么问题,欢迎给舒克老湿留言,大家一同进步。】解题思路:cookie:cookie是网站为了标示用户身份而储存在用户本地终端(ClientSide)上的数据(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。 存储大小:cookie数据大小不能超过4k。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。 有期时间:localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;sessionStorage数据在当前浏览器窗口

  • 手动实现nodejs代理服务器

    最近看到这样一个题目,根据反向代理服务器的原理用nodejs实现一个代理服务器,要求:1、不允许使用第三方包。2、能够代理get请求。3、能够代理post请求。起初看到这个题目的时候,内心以为这没啥呀,因为前面发表过一篇文章:用nodejs搭建代理服务器,但是再仔细阅读要求后发现,有点不同,先前的文章使用了express和http-proxy-middleware这两个第三方包。但是这个题目要求不能使用第三方模块。所以本篇文章便使用nodejs原生模块实现一个代理服务器,首先我们了解下代理服务器的原理,通过如下这张图来了解一下代理服务器:从图中我们可以看到,代理服务器的作用是中转作用,接收客户端请求,将请求发送到被代理的服务器。我们从代理服务器的原理推断一下代理服务器的实现方式:1、首先应该搭建一个http服务器,这里我们使用nodejs的http模块的createServer方法。2、接收客户端发送的请求,那什么是客户端发送的请求呢?通俗一点就是请求报文,请求报文在拆解一下,包括请求行,请求头,请求体。3、将请求报文发送到目标服务器,这里需要使用http模块的request方法。思路

  • C#版 - Leetcode 306. 累加数 - 题解

    C#版-Leetcode306.累加数-题解306.AdditiveNumber在线提交: https://leetcode-cn.com/problems/additive-number/累加数是一个字符串,组成它的数字可以形成累加序列。一个有效的累加序列必须至少包含3个数。除了最开始的两个数以外,字符串中的其他数都等于它之前两个数相加的和。给定一个只包含数字'0'-'9'的字符串,编写一个算法来判断给定输入是否是累加数。说明:累加序列里的数不会以0开头,所以不会出现1,2,03或者1,02,3的情况。示例1:输入:"112358" 输出:true 解释:累加序列为:1,1,2,3,5,8。1+1=2,1+2=3,2+3=5,3+5=8复制示例2:输入:"199100199" 输出:true 解释: 累加序列为:1,99,100,199。1+99=100,99+100=199复制进阶: 你如何处理一个溢出的过大的整数输入?题目难度:Medium通过次数:68提交次数:296相关话题回溯算法 相似题目将数

  • Python基础之常用格式化输出字符详解

    写代码的时候经常会遇到使用格式化字符的情况,这里将常用的三种情况:%s、%d和%f用代码给大家详细说明下: %s字符串%d整型数字%f浮点型好了~格式化字符的输出就讲到这里了,如果对大家有帮助,点个赞在走呗!也欢迎大家私信我,一起学习进步哦。

  • XCode打framework包、cocoapods库制作及Pods库的二进制切换

    近来公司的公共库里有点小问题,但是公共库打成了framework,即使手上有源码也很难调试。网上百度了很多方法,有临时方法,也有比较好的方案,写一篇博客记录下来,送给正在调试framework的你,哈哈哈。所以呢,这篇文章中你会看到:调试framework的临时方案framework的制作方式推送库到cocoapodsPods库的二进制切换调试framework的临时方案这个方案呢,只能作为临时方案,因为这个方案还是有一定局限性的。先说实现方式吧。首先呢,framework的库调试的痛苦在于第一你打不了断点,第二你也看不到堆栈信息。所以从两方面入手逐个击破就好。 首先如果你有源码的话,只要打开你源码的工程build一下,你就会得到一个framework文件。看不到堆栈信息 这是因为framework打包的时候不在你的电脑上,所以你的电脑并没有framework对应的符号表,你就看不到信息了,所以很简单的方式就是右键showinfinder拿到framework然后替换你主工程中响应的framework就好了,这时候你已经可以看到堆栈信息了。 framework.png无法打断点至于打断

  • 干货 | 携程新风控数据平台建设

    作者简介刘丹青,携程信息安全部高级开发工程师。2014年加入携程,主要负责验证码、风控数据平台的开发设计工作,提供性能测试与性能优化的相关支持。前言 近几年,随着电商和互联网金融的发展,各大互联网企业也在逐步加强风控体系的建设,为公司的运营保驾护航。在携程,各BU经常受到恶意注册、登录、恶意刷单、扫号等行为,所以建设了一套数据平台,希望能够从数据中挖掘出有用的信息,不仅可以为风控系统提供数据支持,还可以为其他服务提供支撑。本文主要从架构和业务的角度介绍下携程信息安全团队的数据平台建设之路,以及如何为业务和风控提供支持的。一、数据平台1.0的特点1.0数据平台架构图为了快速支持风控平台,在早期建设数据平台的时候,我们直接通过RabbitMQ收集业务数据,再使用数据引擎对数据做清洗、计算,再存储在MySQL中,把数据处理以sql的形式写入到代码中,通过高频的定时任务对数据做聚合统计。在刚开始运行时,数据量和业务量都比较小,恶意攻击的手段也比较简单,所以数据统计还是比较快速及时的,满足我们大多数的需求。随着业务量的爆炸式增长,数据处理的复杂度提升,我们不得不面对几个问题:数据来源单一,并强依

  • unity urp raytrace体积光god ray效果

    试了一下在unity中使用raytrace方式实现体积光, 运行效果如下 raytrace开销较大,采样加到200几乎卡得跑不动了 首先在光源处拍摄场景(unity对mainlight做了这个处理,并且是级联可设置) 基本原理是在全屏路径下,根据场景深度,还原出世界坐标 根据世界坐标判断是哪个裁切球 (如果不是级联阴影,比如spotlight就不需要这个操作) 然后将世界坐标变换到光源观察坐标light_view_pos 再根据投影矩阵对应到光源纹理的深度纹理 比较当前点在光源摄像机的深度,判断是不是处于遮挡(即阴影) 原理和纹理阴影的处理方式类似 附shader代码如下 Shader"lsc/RaytraceShader" { Properties { _MainTex("Texture",2D)="white"{} _raytrace_step_count("rayracestepcount",Int)=5 _scale("scale",float)=1.0 } SubShader { //Nocullingordepth CullOffZWriteOffZTestAlw

  • (java)从零开始之--装饰者设计模式

    装饰者设计模式:简单定义:增强一个类的功能,而且还可以让这些装饰类互相装饰。 应用场景:当要在某个功能的基础上扩充功能,并且扩充的功能具有大量排列组合,通过继承关系会衍生出大量子类,这时候用装饰者模式来解决。 装饰者设计模式的步骤: 1.在装饰类的内部维护一个被装饰类的引用。 2.让装饰类有一个共同的父类或者是父接口。 例如:人有一种行为叫“吃水果”,其中水果有4种:苹果、香蕉、鸭梨、橘子现在有需求如下: A类人行为:吃苹果 B类人行为:先吃苹果,再吃香蕉 C类人行为:先吃香蕉,再吃苹果 D类人行为:先吃橘子,后吃鸭梨 我们先用子类继承来实现:代码如下 1interfaceIEatFruit{ 2publicvoideatFruit(); 3} 4 5classPersonAimplementsIEatFruit{ 6 7  @Override 8  publicvoideatFruit(){ 9    System.out.println("吃苹果"); 10  } 11 12} 13classPersonBimplementsIEatFruit{ 14 15@Override

  • 二进制文件

    一个可执行文件不光包含了二进制的机器代码 还会自带许多其他信息 如字符串,菜单,图标,字体等   

  • 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>div+css宽度自适应(液态布局)</title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <styletype="text/css"> /*左边栏,设定宽度*/ body,#wrap{ width:100%; border:1pxyellow; } .wrap_l { float:left; height:150px; width:150px; border:1pxsolid#333; } /*中间栏,宽度aut

  • 获取子父节点,tree树状结构的方式--通过循环的方式

    1.导包 <dependencies>  //将domainquary写到了这层<dependency><groupId>cn.xxx.aigou</groupId><artifactId>qqq_product_interface</artifactId><version>1.0-SNAPSHOT</version></dependency><!--springboot相关的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>sp

  • 那些年我们踩过的linux坑(1)

    一、解决虚拟机的centosLinux无网络   这一步为设置物理主机,保证虚拟网关的IP为自动货期,同时本地链接也设置为自动获取。 建立Windows批处理文件xxx.txt改名为xxx.bat xxx.bat内容netstart“VMwareDHCPService” netstart“VMwareNATService” 用管理员权限执行xxx.bat 进入centos命令行 cd/etc/sysconfig/network-scrips/ ls查看文件ifcfge-eno+数字 viifcfg-eno32 修改ONBOOT=yes Esc切换到命令模式输入:wq保存并退出 Centos默认不开启网卡,开启网卡   重启网络 ServiceNetworkManagerstop Servicenetworkrestart ServiceNetworkManagerstart  Pingwww.baidu.com   如图为Ping通 二、yumupdate出现-bash:/usr/bin/yum:/usr/bin/python:badinterp

  • Vases and Flowers(线段树+二分)

    VasesandFlowers(线段树+二分) HDU-4614 解法一: 二分区间,线段区间查询空花瓶个数。复杂度\(O(nlogn^2)\) 由于区间越大,能空花瓶数越多,满足二分单调性。 操作1:二分pos到n区间的,区间查询二分区间的空花瓶数,找到插花的第一个位置和最后一个位置,然后区间修改 操作2:输出查询区间值,修改区间。 #include<iostream> #include<cstring> #definelch2*k #definerch2*k+1 #definemid(l+r)/2 usingnamespacestd; constintN=1e5+7; intt; intn,m,tree[4*N],tap[4*N]; voidinit(intk,intl,intr){ tap[k]=-1; if(l>=r){ tree[k]=0; return; } init(lch,l,mid); init(rch,mid+1,r); tree[k]=tree[lch]+tree[rch]; } voidpushdown(intk,intzl,in

  • 第11周机电传动控制作业

    1.直流电机单闭环调速系统比例积分控制仿真 2.直流电机双闭环调速系统控制仿真 问题:有速度控制和电流控制有了大致的了解,但是对具体的连线还是有点模糊,还需要多学习该知识点。

相关推荐

推荐阅读