- 1、本文档共23页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
北京市昌平区建材城西路金燕龙办公楼一层 电话:400-618-9090
品优购电商系统开发
第17章
跨域解决方案与提交订单
传智播客.黑马程序员
课程目标
目标1:掌握跨域请求CORS解决方案
目标2:完成结算页收货人地址选择功能
目标3:完成结算页支付方式选择
目标4:完成结算页商品清单功能
目标5:完成保存订单功能
1.商品详细页跨域请求
1.1需求分析
从商品详细页点击“加入购物车”按钮,将当前商品加入购物车,并跳转到购物车页面。
1.2 JS跨域请求
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。
1.3跨域调用测试
修改pinyougouweb 的itemController.js ,引入$http服务,修改addToCart方法
//添加商品到购物车
$scope.addToCart=function(){
$http.get('http://localhost:9107/cart/addGoodsToCartList.do?itemId='
+ $scope.sku.id +'&num='+$scope.num).success(
function(response){
if(response.success){
location.href='http://localhost:9107/cart.html';//跳转到购物车页面
}else{
alert(response.message);
}
}
);
}
测试后发现无法跨域调用
XMLHttpRequest cannot load
http://localhost:9107/cart/addGoodsToCartList.do?itemId=112344&num=1.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9100' is therefore not allowed access. The response had HTTP status code 400.
1.4跨域解决方案CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
请求过程如下图:
Preflight Request:
然后服务器端给我们返回一个Preflight Response
下面我们就开始动手,让我们的购物车工程能够接收跨域请求
(1)首先修改pinyougou-cart-web 的CartController.java的addGoodsToCartList方法,添加下面两句代码
response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
response.setHeader("Access-Control-Allow-Credentials", "true");
Access-Control-Allow-Origin
Access-Control-Allow-Origin是 \o "HTML5知识库" \t "/relucent/article/details/_blank" HTML5中定义的一种解决资源跨域的策略。
他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题。
?使用方法,在response添加 Access-Control-Allow-Origin,例如
Access-Control-Allow-Origin:
也可以设置为 * 表示
您可能关注的文档
- 第一单元 文档 分享.docx
- 第三单元. 文档 分享.docx
- 第2课时 解决问题 文档 分享.ppt
- 练习五 文档 分享.pptx
- 整理和复习 文档 分享.pptx
- 练习十九 文档 分享.pptx
- 练习十二 文档 分享.pptx
- 第4课时 5、4、3、2加几 文档 分享.ppt
- 练习二 文档 分享.pptx
- 第4课时 分与合 文档 分享.ppt
- 班级元旦晚会策划书 班级元旦晚会策划书4篇.doc
- 班会会议记录格式及 班会会议记录(实用【7篇】.doc
- 认真学习《中国共产党纪律处分条例》PPT党的六大纪律课件.pptx
- 党纪学习教育PPT新修订的《中国共产党纪律处分条例》解读课件.pptx
- 关于严明党的纪律和规矩的重要论述PPT课件.pptx
- 2024年国九条PPT关于加强监管防范风险推动资本市场高质量发展的若干意见课件.pptx
- 2024干部一定要知敬畏存戒惧守底线PPT相关重要论述课件.pptx
- 推动经济实现质的有效提升和量的合理增长PPT学习教育课件.pptx
- 2024坚持“四步联动”做实党员教育工作PPT新时代党员教育工作课件.pptx
- 权威解读《关于加强社区工作者队伍建设的意见》PPT课件.pptx
文档评论(0)