前端复习-03-接上面ajax跨域问题的解决与探索

废话不多少 。。我估计一万个人都搞不清楚 什么是跨域 然后就被这堵墙无情的挡住了。。我尝试了很多办法解决这个问题。后来再慕课网上的一个老师的ppt那里看到一张图 我觉得 能记住这张图的话 应该就算是深入浅出的了解了跨域了吧。

解决跨域这个遗留问题现在我所知道 常用的有三种方法这里 挨个复习和记录一下。

1.使用代理解决。

使用代理解决 其实很好理解。打个比方说,我要请求的json地址在我的阿里云上面,然后我现在在使用本地测试。去请求服务器上面的json数据,这不用看肯定就是跨域了。怎么办呢,如果我使用代理的思路来解决问题。它会变成 首先我在本地架设了一个xampp,然后我丢了一个 python脚本在本地,我要请求数据的时候 首先发送这个数据到本地的这个python脚本  这个python脚本在接受并保存了这些参数之后使用 著名的urllib2模块 带上这些参数向远端的服务器发送请求 然后得到服务器返回的数据 然后再由这个脚本 返回给本地的js文件  js再负责实施更新数据。。这样听上去没什么难的地方,但是这么说的话 脚本与脚本之间似乎是一个同步操作,不太清楚 太大的数据会不会很大程度的影响性能。我也没尝试过过大的json包。

2.使用jsonp解决跨域问题

这里按照我的理解来说的话是,灵活运用了<script>标签可以 跨域请求文件数据的一个特点。这是显然的,不然我们使用的各大厂商的CDN是怎么做到的呢。。所以如果我在本地用<script>标签调用服务器端的js文件其实就可以了,然而这个服务器端提供的文件则是服务器封装好的json文件 根据前端的需要动态添加的。 虽然听起来有点绕 不过好消息是jquery的.ajax()方法是默认支持jsonp的方式的。

dateType:‘jsonp‘,

//这里随意给jsonp一个值 用来做key
jsonp:‘callback‘,

然后后台就可以来获得这个callback name的值了

jsonDate = method.GET[callback];
//这个jsonDate就是数据了
result = jsonDate

而且jsonp 只支持get方法。 而且jsonp 只支持get方法。 而且jsonp 只支持get方法。

3.使用XMLHttpRequest版本2.

这个。。。这个基本不推荐使用 因为大量兼容性的问题。我还在测试中。

这篇文暂时先这样吧。学习到新的 再来修改一下。

时间: 2024-10-24 07:10:50

前端复习-03-接上面ajax跨域问题的解决与探索的相关文章

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

JQuery的Ajax跨域请求的解决方式

今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方式,只是都是仅仅支持get方式. 各自是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同,也就是跨域获取数据).则须要使用jso

SpringBoot+Ajax跨域安全问题及解决方法

〇.遇到跨域安全问题 在学习SpringBoot过程中,遇到了这样一个问题.当时用SpringBoot开发Rest服务接口,然后用Ajax请求获取数据,来实现前后端分离.但是在前端请求时,始终不能显示应该显示的数据.从浏览器的控制台报错来看(如下图),应该是遇到了跨域安全的问题. 一.为什么会出现跨域安全问题? 要解决这个问题,首先得知道为什么会出现这个问题.通过了解,出现跨域安全问题的原因一般是以下三个问题:浏览器收到了正确的返回数据但是做出了限制.发出去的请求是XMLHttpRequest请

jQuery ajax跨域请求的解决方法

在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数据,事实上简单来说请求同一个域名下的url或者说用不带http的绝对路径和相对路径请求是没有任何问题的,如果请求外部资源,那么这就称为跨域请求. 由于安全性的问题,浏览器默认不支持跨域调用,晚上也有很多方法,各有优缺点,但是有一个比较好的解决方法这也是jQuery1.2之后官方推荐的,那就是在客户端

AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作.这个

ajax跨域问题简单解决--(1)

  js不能跨域请求数据,js可以跨域加载js文件,比如使用jquery可以引用官网的url,这也是跨域解决js的跨域问题可以使用jsonp. 先来说一下什么是跨域和非跨域 简单的据一些例子 (非跨域) http://www.123.com/index.html 调用 http://www.123.com/server.PHP (主域名不同:123/456,跨域) http://www.123.com/index.html 调用 http://www.456.com/server.php (子域

20K前端开发面试题:关于如何回答ajax跨域问题

在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下. 关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的这里不做介绍),内容大概如下:什么是ajax跨域?如何解决ajax跨域?如何分析ajax跨域? 一.什么是Ajax跨域 Ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略". CORS请求原理

Access-Control-Allow-Origin:ajax 跨域访问

在使用jquery的$.ajax跨域访问的时候,如客户端域名是www.test.com,而服务器端是www.test2.com,在客户端通过ajax访问服务器端的资源将会报跨域错误: XMLHttpRequest cannot load http://www.test2.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.test

JQuery的Ajax跨域请求的解决方案

http://www.open-open.com/lib/view/open1334026513327.html 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式, 于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp