﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-业精于勤荒于嬉，行成于思毁于随-随笔分类-JavaScript案例积累</title><link>http://www.blogjava.net/produ/category/54626.html</link><description>&lt;h2&gt;见证学习的轨迹，记录闪光的想法&lt;/h2&gt;</description><language>zh-cn</language><lastBuildDate>Mon, 16 May 2016 14:18:30 GMT</lastBuildDate><pubDate>Mon, 16 May 2016 14:18:30 GMT</pubDate><ttl>60</ttl><item><title>javaScript_跨域资源共享CORS</title><link>http://www.blogjava.net/produ/archive/2015/11/26/430531.html</link><dc:creator>都较瘦</dc:creator><author>都较瘦</author><pubDate>Thu, 26 Nov 2015 08:46:00 GMT</pubDate><guid>http://www.blogjava.net/produ/archive/2015/11/26/430531.html</guid><wfw:comment>http://www.blogjava.net/produ/comments/430531.html</wfw:comment><comments>http://www.blogjava.net/produ/archive/2015/11/26/430531.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/produ/comments/commentRss/430531.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/produ/services/trackbacks/430531.html</trackback:ping><description><![CDATA[<div>要记录好这个问题，首先需要描述清楚这个问题。</div>
<div></div>
<div>有如下的一个场景：我们在实现一个系统中某个功能的时候，可能系统的某些模块不在一个域名下。用户中心模块部署在user.xxx.com下，产品相关的功能部署在product.xxx.com下，在用户中心的某些页面，我们或许要请求产品功能模块的功能，此时就会有问题出现。以Google Chrome（版本 45.0.2454.101 m）浏览器为例，当当前的页面在A域名下，我们在页面中构造了一个异步请求，我们需要调用位于B域名下的某个API，代码片段如下：<br />
<div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&lt;script&nbsp;type="text/javascript"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color: #0000FF; ">function</span>()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #008000; ">//</span><span style="color: #008000; ">当前页面所在域名：http://localhost:9000/</span><span style="color: #008000; "><br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #008000; ">//</span><span style="color: #008000; ">jQuery版本：jquery-1.11.3.min.js</span><span style="color: #008000; "><br />
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;:&nbsp;"http://localhost:9001/order/pindexpost",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;:&nbsp;"POST",<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType&nbsp;:&nbsp;'json',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;<span style="color: #0000FF; ">function</span>(data)&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&lt;/script&gt;</div>
<div>但是请求之后，浏览器控制台给出了如下的错误信息</div>
<img src="http://www.blogjava.net/images/blogjava_net/produ/2015-11-26_10-43-39.png" border="0" alt="" width="640" height="18" /><br />
<div>那么这就是标题中所提到的<strong>跨域资源共享CORS</strong>问题了。我们把这个概念细化一下，首先，为什么会有CORS？简单点理解就是出于安全考虑，浏览器都遵循一个叫同源策略的东西，他约束浏览器说&#8220;不是你的东西，你问人家要，人家默认不给你，除非人家同意给你&#8221;，基于这个策略，就有了跨域资源共享的问题，那么，怎么就叫跨域了呢？上面代码中的域名不是一样的吗，都是指向本地的localhost啊。举个栗子说明下</div>
<br />
<div>http://www.blogjava.net:80,左边是一个完整的请求，包含了协议，子域名等等若干部分，我们把它理解为域，但凡是在这个域下发生的请求，都无法直接访问到其他域的资源</div>
<div>
<ul>
     <li>http://www.blogjava.net:80能访问http://www.blogjava.net:81下的资源吗？不行！</li>
     <li>http://www.blogjava.net:80能访问http://abc.blogjava.net:80下的资源吗？不行！</li>
     <li>http://www.blogjava.net:80能访问https://www.blogjava.net:80下的资源吗？不行！</li>
     <li>http://www.blogjava.net:80能访问http://域名对应的真实IP:80下的资源吗？不行！</li>
     <li>http://www.blogjava.net:80能访问http://www.xyz.net:80下的资源吗？不行！</li>
</ul>
</div>
<div>
<div>域哪怕有<strong>一点点不一样</strong>，<strong>一点点不一样</strong>，<strong>一点点不一样</strong>，都是不可以访问的，那么问题来了，如何实现跨域呢？ 目前有三种方案可以打破同源策略所带来的限制，实现跨域请求。</div>
</div>
<ol>
     <li>
     <div><strong>使用JSONP</strong>。这种方案是使用HTML的script标签来实现的，script标签的src属性不受同源策略约束，可以访问任意站点的资源，但是，该方案有着自己的约束。首先，他只能发出GET请求，因为script标签的初衷就是为了获取js脚本，所以如果返回的数据内容不是js脚本的话，也不会成功。基于这个约束，我们需要改造一下我们的请求：<br />
     <div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br />
     <br />
     Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
     http://www.CodeHighlighter.com/<br />
     <br />
     --><span style="color: #008080; ">&nbsp;1</span>&nbsp;&lt;script&nbsp;type="text/javascript"&gt;<br />
     <span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color: #0000FF; ">function</span>&nbsp;()&nbsp;{<br />
     <span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #008000; ">//</span><span style="color: #008000; ">当前页面所在域名：http://localhost:9000/</span><span style="color: #008000; "><br />
     </span><span style="color: #008080; ">&nbsp;4</span>&nbsp;<span style="color: #008000; "></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #008000; ">//</span><span style="color: #008000; ">&nbsp;jQuery版本：jquery-1.11.3.min.js</span><span style="color: #008000; "><br />
     </span><span style="color: #008080; ">&nbsp;5</span>&nbsp;<span style="color: #008000; "></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({<br />
     <span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;"http://localhost:9001/order/pindexpost",<br />
     <span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;"POST",&nbsp;dataType:&nbsp;'jsonp',<br />
     <span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonpCallback:&nbsp;"callback"<br />
     <span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
     <span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<br />
     <span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;<br />
     <span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">function</span>&nbsp;callback(result)&nbsp;{<br />
     <span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("suc:"&nbsp;+&nbsp;result);<br />
     <span style="color: #008080; ">14</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
     <span style="color: #008080; ">15</span>&nbsp;&lt;/script&gt;&nbsp;</div><div>刚才提到，JSONP方式是基于script标签的，所以我们要对返回的数据做一些处理，使返回的数据是一段js脚本才可以。我们在客户端预定义好callback函数，使得服务端返回数据的时候可以直接调用这个callback函数，服务端代码片段如下：</div><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080; ">1</span>&nbsp;response().setContentType("application/javascript");<br /><span style="color: #008080; ">2</span>&nbsp;<span style="color: #0000FF; ">return</span>&nbsp;ok("callback("&nbsp;+&nbsp;data&nbsp;+&nbsp;")");</div><div>要注明返回的格式，并且data的格式也要符合js的语法。其实说白了，JSONP就是请求目标数据，然后将目标数据和回调函数进行拼接，以javascript的形式返回给浏览器，之后浏览器执行的这个回调函数。<br /></div></div>
     </li>
<li><div><strong>使用代理服务器</strong>。这个比较好理解，不过运维的成分多一些，设置一个代理服务器，根据请求API所在命名空间的不同，转发到相应的域去，这样一来就骗过了浏览器，让浏览器以为所有的数据都来自一个域。<br /></div></li><li><strong>设置请求的相应头</strong>。在目标API的响应头中添加&#8220;Access-Control-Allow-Origin&#8221;，设置值为&#8220;*&#8221;，这就是让服务器通知浏览器，说&#8220;我这个API的响应，是面向所有人的，*就代表这个意思啊&#8221;，但是，这也会带来一个安全性的问题，所以你可以设置部分站点可以跨域访问，比如Access-Control-Allow-Origin: http://www.blogjava.net/，但是这个响应头存在一定的兼容问题，具体支持情况可以查看<a href="http://caniuse.com/#search=CORS" title="caniuse.com">caniuse.com</a></li></ol>
</div><img src ="http://www.blogjava.net/produ/aggbug/430531.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/produ/" target="_blank">都较瘦</a> 2015-11-26 16:46 <a href="http://www.blogjava.net/produ/archive/2015/11/26/430531.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JavaScript_利用JavaScript，编写PS脚本，开发图片量产工具</title><link>http://www.blogjava.net/produ/archive/2014/11/25/420583.html</link><dc:creator>都较瘦</dc:creator><author>都较瘦</author><pubDate>Tue, 25 Nov 2014 13:19:00 GMT</pubDate><guid>http://www.blogjava.net/produ/archive/2014/11/25/420583.html</guid><wfw:comment>http://www.blogjava.net/produ/comments/420583.html</wfw:comment><comments>http://www.blogjava.net/produ/archive/2014/11/25/420583.html#Feedback</comments><slash:comments>3</slash:comments><wfw:commentRss>http://www.blogjava.net/produ/comments/commentRss/420583.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/produ/services/trackbacks/420583.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 背景：身在一个有实业的电商公司，设计部的妹子们总是会有做不完的商品图片，当然了，要是做点有技术含量的美化工作也罢，但是最近她们很是无聊，总是要做一些重复性的工作，就比如如题所说的，图片量产，量产什么呢？价格牌。。。这东西很没意思哎！就是给你一个模板，然后你自己把模板原来的文字图片换掉就行了，再排一下版，纯体力劳动好么！博主做过一阵子的对日外包工作，深知她们的痛苦，如果说某些对日外包的程序猿是人肉转...&nbsp;&nbsp;<a href='http://www.blogjava.net/produ/archive/2014/11/25/420583.html'>阅读全文</a><img src ="http://www.blogjava.net/produ/aggbug/420583.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/produ/" target="_blank">都较瘦</a> 2014-11-25 21:19 <a href="http://www.blogjava.net/produ/archive/2014/11/25/420583.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>