跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一。
  和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定。所以折腾了下闻名已久的 CORS(跨域资源共享,Cross-Origin Resource Sharing ,这边文章也就是折腾期间的小记与总结。

概述

  • CORS能做什么:
正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。
本文介绍的CORS就是一套AJAX跨域问题的解决方案。
  • CORS的原理:
CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。
  • CORS浏览器支持情况如下图:
  喜闻乐见、普大喜奔的支持情况,尤其是在 移动终端上,除了opera Mini;
  PC上的现代浏览器都能友好的支持,除了IE9-,不过前端工程师对这种情况早应该习惯了...
CORS启航
  假设我们页面或者应用已在 http://www.test1.com上了,而我们打算从 http://www.test2.com请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误," 跨域"也就以此由来。
  利用 CORS, http://www.test2.com只需添加一个标头,就可以允许来自 http://www.test1.com的请求,下图是我在PHP中的 hander() 设置, “*”号表示允许任何域向我们的服务端提交请求
   也可以设置指定的域名,如域名http://www.test2.com,那么就允许来自这个域名的请求
  当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,其中见红框中有一项信息是“ Access-Control-Allow-Origin:*”,表示我们已经启用CORS,如下图。
   PS: 由于demo都在我厂的两台测试机间完成,外网也不能访问,所以在这就不提供demo了,见谅
  简单的一个header设置,一个支持跨域&POST请求的server就完成了:)
  当然,如果没有开启CORS必定失败的啦,如下图:
  

问题&小结

  • 刚刚说到的兼容性。CORS是W3C中一项较新的方案,所以部分浏览器还没有对其进行支持或者完美支持,详情可移至http://www.w3.org/TR/cors/
  • 安全问题。CORS提供了一种跨域请求方案,但没有为安全访问提供足够的保障机制,如果你需要信息的绝对安全,不要依赖CORS当中的权限制度,应当使用更多其它的措施来保障,比如OAuth2。
  自认为的cors使用场景:
  • cors在移动终端支持的不错,可以考虑在移动端全面尝试;PC上有不兼容和没有完美支持,所以小心踩坑。当然浏览器兼容就是个伪命题,说不准某个浏览器的某个版本就完美兼容了,说不准就有点小坑,尼玛伤不起!~
  • jsonp是get形式,承载的信息量有限,所以信息量较大时CORS是不二选择;
  • 配合新的JSAPI(fileapi、xhr2等)一起使用,实现强大的新体验功能。

总结

以上是DEVMAX为你收集整理的AJAX POST&跨域 解决方案全部内容。

如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

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

  1. 吃透移动端 Html5 响应式布局

    这篇文章主要介绍了吃透移动端 Html5 响应式布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 如何在iOS上快速将ALAsset映像保存到磁盘?

    我正在使用ALAsset来检索这样的图像:这返回CGImageRef,我想尽快保存到磁盘…解决方案1:解决方案2:问题是两种方法在设备上的执行速度都很慢.每张图片大约需要2秒才能执行此操作.这绝对是长久的.问题:如何加快图像保存过程?或许还有更好的解决方案吗?

  3. ios – 根据大小类更改约束的乘数

    根据当前的大小类,可以给出一个不同乘数的约束吗?我有一个看法,我想要的是一般尺寸类宽度的一半的屏幕尺寸,我希望它是一个紧凑的尺寸类宽度的屏幕尺寸的80%.在故事板中,我可以选择将不同大小的类别的不同变量添加到约束常量值,但不是乘数值.这是相等的宽度限制.我没有在程序上添加约束,所以我希望他们可能是一个解决方案,在这条路上.任何人都可以告诉我是否可以通过故事板或编程方式来做我正在寻找的内容?

  4. 是否可以从我的iOS应用程序包中删除文件?

    解决方法无法删除捆绑包中的文件.必须对应用程序进行签名,如果以任何方式修改了包,它将不会通过签名.我能想到的唯一其他解决方案是设置Web服务,并让您的应用程序根据需要下载部分内容.这可能是也可能不是可行的解决方案,具体取决于您的应用实际执行的操作.

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

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

  6. Swift40/90Days - 用函数式编程解决逻辑难题

    Swift90Days-用函数式编程解决逻辑难题这篇翻译的文章,用两种方法解决了同一个逻辑难题。第二种方法利用了Swift的一些语言特性,实现了函数式编程的解决方案。这样的代码对于指令式编程来说再平常不过,接下来我们就来看下如何用函数式编程解决这个问题。Swift中函数已经是一等公民,这让高阶函数变成可能,也就是说,一个函数可以是通过其它函数组装构成的。思考Swift对于函数式编程的支持让我感觉的兴奋,Excited!

  7. 关于oc和swift混编 框架framework时 只能在真机运行或只能在模拟器单独运行的解决方案

    问题描述:关于oc和swift混编框架framework时只能在真机运行或只能在模拟器单独运行的解决方案。

  8. tableview 最上面有空白 解决方案

    self.automaticallyAdjustsScrollViewInsets=false

  9. 比较 – Swift:如何找出字母是字母数字还是数字

    我想在以下字符串中计算字母,数字和特殊字符的数量:我试过了:但我收到错误。我尝试了各种其他变体–仍然会收到错误–例如:任何线索?可能的Swift解决方案:更新:上述解决方案仅适用于ASCII字符集中的字符,即不识别,é或为字母。以下替代方案解决方案从Foundation框架中使用NSCharacterSet,它可以测试字符基于他们的Unicode字符类:更新2:从Xcode6beta4开始,第一个解决方案不再工作,因为从Swift中删除了isAlpha()和相关的方法。

  10. swift – 我可以指定generic是值类型吗?

    我知道我们可以通过使用AnyObject来基本上指定我们的泛型是任何引用类型:但是有没有办法指定我们的泛型应该只是值类型,不允许引用类型?

随机推荐

  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上传文件并更新到<input>中的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找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部