AJAX POST&跨域 解决方案 - CORS

最新推荐文章于 2024-04-21 01:53:46 发布
转载 最新推荐文章于 2024-04-21 01:53:46 发布 · 690 阅读 · 0

一晃又到新年了，于是开始着手好好整理下自己的文档，顺便把一些自认为有意义的放在博客上，记录成点的点滴。
    
 
 
　　跨域是我在日常面试中经常会问到的问题，这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略， 即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等)一起使用，实现强大的新体验功能。
 
　　如果觉得这文章也算用心，请劳驾点右下角的推荐。
　　祝2014顺利。
 
　　最后，有 北京&上海 的朋友想春节后想换工作的，【百度移动云事业部】期待聪明、勤奋的你 与我联系 (JD在页面右上角)
 
参考资料:
            http://www.w3.org/TR/cors/
           http://caniuse.com/#search=cors
 
 
作者： 聂微东
出处： http://www.cnblogs.com/Darren_code/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
64
1
(请您对文章做出评价)
«上一篇： 数据工作-百度统计初体验
»下一篇： Nodejs初阶之express
Add your comment

  1. #1楼magicdawn   2014-01-06 13:05
    就是加一个header的啊,可是post 的action地址那页面要不是你能修改的,怎么弄...

    昨天碰到一个问题 http://xhj.douqq.com/这是一个小黄鸡的页面,是post提交chat参数,想借过来用用,结果就碰到了那个错误...

    最后用服务器中转的,写个玩玩 http://magicdawn.apphb.com/Simsimi

    中转用webrequest,感觉特么费劲,请求服务器,服务器再webrequest,再把webresponse写到这个response里面...费劲,又浪费服务器资源...有什么好方法木有呢
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/524870/20130505173323.png
  2. #2楼magicdawn   2014-01-06 13:11
    我那个小黄鸡中转接口 http://magicdawn.apphb.com/Simsimi/Agent?chat=xxx
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/524870/20130505173323.png
  3. #3楼[楼主]聂微东   2014-01-06 16:09
    @ magicdawn
    如果post页面不能改或者不知道CORS，那这套方案就不行了。

    至于你写的玩玩那个东西，木有神马建议，不明觉厉:)
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  4. #4楼[楼主]聂微东   2014-01-06 16:13
    @ magicdawn
    想了半天，你想借用别人的接口搞这个东西，不用webrequest我也没有别的方法了，看看你再多问问其他人试试。没帮上忙，略惭愧。
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  5. #5楼magicdawn   2014-01-06 18:44
    @ 聂微东
    哦,看到有个Apache rewrite proxy规则的教程,不知道IIS咋弄
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/524870/20130505173323.png
  6. #6楼[楼主]聂微东   2014-01-07 11:07
    @ magicdawn
    apache真心不懂了，加油。
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  7. #7楼何戈洲   2014-01-08 10:18
    多谢分享，那天试了下这个方案，发现不管用，不知道是怎么回事，不清楚是不是浏览器不支持
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/u46256.jpg?id=24205029
  8. #8楼[楼主]聂微东   2014-01-10 11:50
    @ 何戈洲
    浏览器支持情况在文章中有提到，现代浏览器都支持的，你看看调式工具中header是否设置成功了。
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  9. #9楼SharpLW   2014-07-07 07:42
    你好。我试了你的办法，可以用。但有没有通过Ajax传数据到服务器的例子呢。
    支持(0) 反对(0)
  10. #10楼网名还没想好   2014-10-17 11:07
    爱好dota~
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/355147/20150603191620.png
  11. #11楼Leeeex   2014-11-03 01:49
    这样的跨域是收发数据吗？能跨站点操作JS方法吗，例如A站点页面为父窗口，打开子窗口B站点的页面。然后B站点的页面能跨域操作A站点页面的方法么。
    就像A站点页面有个JS方法siteA();B站点执行parent.window.siteA()，这样能执行成功么？
    支持(0) 反对(0)
  12. #12楼zhoushen刀一个   2015-03-06 16:37
    我是python 后台， 设置了cors 的功能。
    目前前端get请求能请求成功，post却是403.
    我对前端真心不懂，请问有没有注意事项。。。
    支持(0) 反对(0)
  13. #13楼zhoushen刀一个   2015-03-06 16:39
    GET http://sso.acttao.com:8888/cas/login/?service=%2Fauth%2Flogin%2F&email=&password=&next=

    200 OK
    36ms
    jquery-1.8.2.js (第 8416 行)
    参数头信息响应HTMLCookies
    原始头信息
    Access-Control-Allow-Cred... true
    Access-Control-Allow-Orig... http://zgxcw.acttao.com:8002
    Cache-Control max-age=0
    支持(0) 反对(0)
  14. #14楼zhoushen刀一个   2015-03-06 16:41
    403 FORBIDDEN
    32ms
    jquery-1.8.2.js (第 8416 行)
    头信息Post响应HTML
    原始头信息
    Access-Control-Allow-Cred... true
    Access-Control-Allow-Orig... http://zgxcw.acttao.com:8002
    Content-Type text/html
    Date Fri, 06 Mar 2015 08:40:54 GMT
    Server WSGIServer/0.1 Python/2.7.6
    Vary Cookie
    支持(0) 反对(0)
  15. #15楼夜明兔   2015-04-13 00:37
    中文冒号害死人啊 -_-||
    支持(0) 反对(0)
  16. #16楼[楼主]聂微东   2015-04-13 14:25
    @ 夜明兔
    这, 额...-_-||
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  17. #17楼mrma1989   2015-04-23 14:12
    ajax post请求，发现不发送cookies了呢
    支持(0) 反对(0)
  18. #18楼键盘2   2015-05-27 11:11
    楼主大哥，我现在需要一个域名的所有的二级域名都可以发送请求，不知道要怎么设置呢？除了用*号还有什么办法吗？
    支持(0) 反对(0)
  19. #19楼颜传   2015-07-02 10:08
    弱弱的问一句：跨域究竟是浏览器不允许发送跨域请求还是浏览器不允许接受跨域响应呢？看这个情况，只是修改了服务端access-control-allow-origin,应该只是不允许收响应吧？还是因为开启core部分没看到，其实浏览器也不允许发请求，开启了才允许发？
    支持(0) 反对(0)
  20. #20楼[楼主]聂微东   2015-07-02 11:45
    同源策略理解了就好，看看这个文章： http://www.cnblogs.com/huangjacky/p/4001073.html
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  21. #21楼天涯过者   2015-07-03 09:19
    直接数据返回是callback(json)也是可以的呢
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/663962/20150703135050.png
  22. #22楼MasonZhang   2015-07-22 15:56
    很流畅，清晰易懂！
    支持(0) 反对(0)
    http://pic.cnblogs.com/face/489086/20151102165608.png
  23. #23楼[楼主]聂微东   2015-07-31 08:13
    @ miketwais
    谢谢支持:)
    支持(0) 反对(0)
    https://i-blog.csdnimg.cn/blog_migrate/4f7e4744a6b4b89eb86973543cb53c03.jpeg
  24. #24楼猪儿闹闹   2015-09-16 11:22
    "假设我们页面或者应用已在test1.com 上了，而我们打算从 test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。
    　　利用 CORS，test2.com 只需添加一个标头，就可以允许来自 test1.com 的请求，下图是我在PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求"

    您好 第二段的test1和test2的例子是不是写反了，第一段说应用已在 test1.com 上，打算从test2.com请求，但第二段却说给test2.com 只需添加一个标头，就可以允许来自test1.com 的请求，下面截图又说也可以设置指定的域名，如域名 test2.com ，那么就允许来自这个域名的请求...

    我理解时header是设置在test1上，使其可接受test2发来的跨域请求吧，以此推断第二段段落是不是写反了
    支持(2) 反对(0)
  25. #25楼vloner   2016-01-18 11:53
    @ 猪儿闹闹
    我想应该是写错了
    支持(0) 反对(0)
  26. #26楼34123972016/4/19 19:45:15 王伟嵩   2016-04-19 19:45
    我在服务器上设置头域的代码，options请求进不来是为什么呢？options请求都到不了我设置头域的代码这里，不清楚请求是在哪个地方过不来= =
    支持(0) 反对(0)
jquery ajax 跨域解决方案 - CORS
会飞的程序猿
07-31 1万+
CORS 跨域方案 //弊端：存在浏览器兼容的问题 需要被请求方的服务端设置： Access-Control-Allow-Origin 注意：Access-Control-Allow-Origin 不可设置为 ，设置为可访问的域名。* 服务端配置，不同语言，不同写法，仅借鉴 header(“Access-Control-Allow-Origin: “http://cdn....
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
热门推荐
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域
04-11
解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域
ajax 跨域----post解决方案CORS
专注于性能调优、安全、自动化
04-27 776
http://www.cnblogs.com/Darren_code/p/cors.html
ajax之POST跨域请求
weixin_37998428的博客
08-12 730
1，简短说明 ajax跨域请求，常见的有jsonp，httpClient，CORS插件等 这次主要介绍CORS插件的使用 几个问题 1，什么是跨域：浏览器同源策略，协议、域名和端口，三者有一个不同，则跨域2，什么是jsonp及如何使用【这里不做重点介绍】 3，什么是httpClient及如何使用【这里不重点介绍】 4，什么是CORS及如何使用【重点介绍】 2，CORS插件配置 ...
node express跨域cors解决post传值问题
雄关漫道
01-06 704
开发十年，就只剩下这套Java开发体系了 >>>    ...
【转载】ajax跨域及解决方案（jsonp、cors）
最新发布
2401_84093837的博客
04-21 453
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！
Ajax跨域问题及解决方案（jsonp，cors）
01-19
解决方案： 1.jsonp 　在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；...
ajax跨域问题解决方案：cors-filter-1.7.1 和 java-property-utils-1.9.1
为了解决AJAX跨域问题，业界提出了CORS（Cross-Origin Resource Sharing，跨源资源共享）机制。它是一种安全策略，允许一个域（源）的网页访问另一个域的资源。通过在服务器端设置特定的响应头，可以控制哪些跨域...
代替jquery $.post 跨域提交数据的N种形式
37度2
03-30 3万+
跨域的N种形式： 1.直接用jquery中$.getJSON进行跨域提交           优点：有返回值,可直接跨域；           缺点：数据量小；           提交方式：仅get (无$.postJSON) $.getJSON("http://www.sendnet.cn/?callback=?" , { UserId: 1001 }, function
$.post 跨域传输数据
weixin_30883271的博客
11-24 393
使用的是TP框架 前端代码： <!DOCTYPE html><html> <head> <title>这里是前端代码</title> </head> <body> <form action="" method="get"> 姓名:<input type="text" nam...
jquery post 跨域 提交数据
weixin_30342827的博客
10-21 281
jquery post 跨域 提交数据 跨域的N种形式： 1.直接用jquery中$.getJSON进行跨域提交 优点：有返回值,可直接跨域； 缺点：数据量小； 提交方式：仅get (无$.postJSON) 2.在页面中嵌入一个iframe，把iframe的宽和高设置为0进行跨域提交 ...
post跨域问题
09-20 166
post跨域是不能用jsonp的方法去解决的，只能在服务器端做下处理，通过ajax的方法去请求 当遇到传值必须是json的格式时，JSON.stringify()转成json， 当遇到请求头无法改变时，必须用$.aja...
解决POST请求跨域问题
qq_39136661的博客
08-10 1万+
解决POST请求跨域问题 今天在做项目的时候。出现了POST请求跨域失败，而GET请求跨域成功的很奇怪的情况，自己为此研究了好久，特此做个记录。 场景：前端发起POST请求后端接口时，报错，错误如下： 初始问题分析： 其实原来在后端管理页面也出现过类似的错误，看到CORS error，初步考虑是跨域问题。由于原来在后端代码中已经全局添加了corsfilter解决跨域问题，为此刚开始拟定的解决方案为：添加允许跨域的域名。 结果失败，错误仍旧。 再次对比后端跨域成功的请求与此次请求的区别。发现成功的是ge
Ajax发送post请求以及跨域问题解决
qq_40711092的博客
09-05 1734
post1 function post(jd,wd) { $.post("http://localhost:8080//jwd/getp", { jd:jd, wd:wd }, function(result){ console.log(result.msg+result.code) }) } post2 -同 function post2(jd,wd){
解决前端post跨域问题
weixin_42371145的博客
11-19 3732
转自：https://blog.youkuaiyun.com/baidu_38027860/article/details/79960927 网上post跨域解决的问题方案一箩筐，但是真正能用得上的我还真是一个没看到，基本上都是基于jsonp的方案去解决跨域的问题，jsonp的原理我就不讲了，网上介绍的多了去了，既然是jsonp了，那还谈什么post跨域问题了，一群标题党，来自一个查了一天百度及论坛人的吐槽… 好了，言归正传，在具体说解决办法之前我先说一下为什么会有跨域的问题，post跨域问题本身是因为请求的域名和用于
跨域问题详解：CORS问题+解决办法
weixin_45565886的博客
09-29 2万+
跨域问题详解：CORS问题+解决办法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值