1.为什么会出现跨域无法访问的情况?

跨域是指不同域名之间的相互访问。当要在在页面中使用js获取其他网站的数据时,就会产生跨域问题,比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时以及hybrid app中请求数据,浏览器就会提示以下错误。跨域是由浏览器的同源策略造成的(下面解释同源策略)。

2.什么是同源策略?

同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。只要这四个任何一个不同,就不是同源了。


同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据,防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。

3.什么是跨域问题?

浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在协议、域名、端口均相同才能被访问,否则会提示如下错误:

XMLHttpRequest cannot load xxxxxxx is not allowed by Access-Control-Allow-Origin.
这就是跨域问题。

4.怎么解决跨域问题?

4.1JSONP

JSONP全名是JSON with Padding。只支持get请求,不支持post请求。

基本原理:

JSONP通过动态的<script>元素来使用的,向服务器请求JSON数据(<script> 的src属性获得js代码, 不受同源政策限制),使用时为src属性指定一个跨域URL。
服务器收到请求后,将数据放在一个指定名字的回调函数(callback)里传回来。
用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句。

下面是使用JSONP跨域请求的一个简单例子。

<script>
  //回调函数
    function  checkName(result) {
        document.getElementById("resultSpan").innerHTML=result.inner;
    }
    //监听用户名的变化
    document.getElementById("name").onblur = function () {
        var name = this.value;
        //将回调函数名一起传到后台,后台无需操心实现功能的函数名,只要从前台获得即可
      var resultStr = "http://168.168.4.69:3000/checkname?callback="+ "checkName" +"&username="+name;
        //动态创建script
        createScript(resultStr);
    }
    //动态创建script,用来实现jsonp的跨域请求
    function createScript(src) {
        var script=document.createElement("script");
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }
</script>
总结简单流程:

动态生成<script>标签,然后通过标签的src属性发送GET类型的跨域请求,
服务器端返回一段js脚本,这段js脚本的内容为一个函数调用,实参为需要返回的响应数据(json),
客户端这边需要提前定义好对应的函数,当<script>请求成功并接收到数据时,会自动调用此函数,在函数中 我们就可以处理响应数据了.

4.2CORS(跨域资源共享)

CORS全名是Cross-Origin Resource Sharing(CORS)。跨域资源共享是一份浏览器技术的规范,以避开浏览器的同源策略,是 JSONP 模式的现代版。
与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。
用 CORS 可以让前端工程师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。
另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。CORS只能在现代的浏览器实现 。

基本原理:

使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。

下面是显示CORS跨域的操作:

只需在服务器端添加一个响应头即可,

  • 允许所有域都能访问:Access-Control-Allow-Origin: *
  • 允许指定的域能访问:Access-Control-Allow-Origin: http://www.test.com

可以看出CORS实现非常简单,但是CORS存在一个缺陷,那就是兼容性问题。看图,IE8,9和opera Mini不支持


4.3两种实现跨域方法的对比

  1. CORS 除了 GET 方法外,也支持其它的 HTTP 请求方法如 POST、 PUT 等。
  2. CORS 可以使用 XmlHttpRequest 进行传输,所以它的错误处理方式比 JSONP 好。
  3. JSONP 可以在不支持 CORS 的老旧浏览器上运作。

AJAX跨域解决方案的更多相关文章

  1. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 解析html5 canvas实现背景鼠标连线动态效果代码

    流行的动态背景连线特效。今天小编通过实例代码给大家解析html5 canvas实现背景鼠标连线动态效果,感兴趣的朋友一起看看吧

  3. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  4. swift开发笔记9 - 正向和反向页面传参

    在storyboa里segue是这样的:首先看考勤页面(主页面)如何给备注页面传参:在考勤页面(主页面)的viewcontroller中找到prepareForSegue方法,这个方法由xcode自动生成,用于在使用segue跳转前,做一些处理动作:实际上是通过修改segue的目标页面的某个类属性,从而达到传参的目的。

  5. [快速学会Swift第三方库] Kingfisher篇

    [快速学会Swift第三方库]Kingfisher篇Kingfisher是一个轻量的下载和缓存网络图片库。也可以利用kf_setimageWithURL函数的返回值来进行更多的管理操作下载器自定义下载器参数缓存系统自定义缓存参数预取将一些图片在显示到屏幕上之前,先预取到缓存。动态图片加载动态图片只需要加上一行代码,设置imageView为AnimatedImageView,不设置也能加载,但是在动态图片较大的时候推荐进行该设置。深入学习这里列出了Kingfisher大多数操作,如果想要深入学习Kingfi

  6. swift - 回调

    回调函数B不由该函数的实现方A直接调用,而是在特定的事件或条件发生时由另外的一方C调用,用于对该事件或条件进行响应。在swift中有同步和异步两种形式的回调函数:同步回调函数异回调函数步C调用方法B,B可以是函数或者closureC调用函数B并使B在另一线程上运行B返回之前C处理block状态B和C运行在不同的线程,不会互相block。

  7. 6.3 Swift闭包表达式作为回调函数

    /**闭包表达式作为回调函数*//**上节课中呢,说了闭包表达式的语法,将闭包表达式赋给一个常量并不常用,那种调用方式还不如就写成函数的形式*/vararray=[20,2,3,70,8]showArrayprintbubbleSortletintCmp={->Intin//可以修改闭包表达式//letx=a%10//lety=b%10ifa>b{return-1}elseifaIntin//可以修改闭包表达式letx=a%10lety=b%10ifx>y{return-1}elseifxVoid{for

  8. [译] Alamofire Tutorial: Getting Started

    Alamofire提供了链式的request/response方法,JSON的传参和响应序列化,身份认证和其他特性。Alamofire的优雅之处在于它完完全全是由Swift写成的,并且没有从它的Objective-C版本-AFNetworking那继承任何特性。该token将会被包含在每个发往Imagga的请求的头部。Apple提供JSONSerialization类来帮助将内存中的对象转换为JSON,反之亦然。Alamofire有几个主要功能:.upload:以multipart,流,文件或数据方法上传

  9. 如何在Swift中传递回调函数

    我看过例子,这应该是我想的.我的类的定义是不正确的,因为我传递回调的方式吗?

  10. Android Facebook登录中不会调用回调函数

    解决方法你忘了把监听器放在onActivityResult()中将以下代码放在onActivityResult活动方法中:

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部