脚本宝典收集整理的这篇文章主要介绍了

跨域总结(jquery,php)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">引子</h2> <p>项目原因,前后端跨域了,第一次涉及到跨域的内容,踩了蛮多坑的,总结一下,避免下次再遇到~</p> <h2 id="articleHeader1">一、图片发送请求</h2> <p>因为图片是不会去判断是否跨域的,但是也只能发送get请求,并且获取不到返回值,可以用来监听页面访问数量或者广告点击数量</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var img=new Image(); img.src='http://www.baidu.com'; img.onerror=function(){ alert('error'); } img.onload=function(){ alert('success'); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-keyword">var</span> img=<span class="hljs-keyword">new</span> Image(); img.src=<span class="hljs-string">'http://www.baidu.com'</span>; img.onerror=<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ alert(<span class="hljs-string">'error'</span>); } img.onload=<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ alert(<span class="hljs-string">'success'</span>); }</code></pre> <h2 id="articleHeader2">二、jsonp</h2> <p>jsonp只能用于get请求,设置dataType:'jsonp'</p> <blockquote><p>使用 JSONP 形式调用函数时,如 "myurl?callback=?" <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 将自动替换 ? 为正确的函数名,以执行回调函数。</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.ajax({ url: &quot;test.html&quot;, dataType:'jsonp', success: function(html){ // } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>$.ajax({ <span class="hljs-attr">url</span>: <span class="hljs-string">"test.html"</span>, dataType:<span class="hljs-string">'jsonp'</span>, <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">html</span>)</span>{ <span class="hljs-comment">//</span> } });</code></pre> <p>其实实现就下面的效果,如果直接这样写,就是页面直接执行,请求成功后执行页面的call函数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot; src='http://www.aaa.com?callback=call'></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;">&lt;script <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text/javascript"</span> src=<span class="hljs-symbol">'http</span>:<span class="hljs-comment">//www.aaa.com?callback=call'&gt;&lt;/script&gt;</span></code></pre> <h2 id="articleHeader3">三、<a href="http://www.js-code.com/tag/cors" title="CORS" target="_blank">CORS</a>,服务器端设置</h2> <h3 id="articleHeader4">1.服务器端设置允许请求的地址</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" header( &quot;Access-Control-Allow-Origin:*&quot; );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code style="word-break: break-word; white-space: initial;"> header( <span class="hljs-string">"Access-Control-Allow-Origin:*"</span> )<span class="hljs-comment">;</span></code></pre> <h3 id="articleHeader5">2.设置可请求的方式</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" header( &quot;Access-Control-Allow-Methods:POST,GET&quot; );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code style="word-break: break-word; white-space: initial;"> header( <span class="hljs-string">"Access-Control-Allow-Methods:POST,GET"</span> )<span class="hljs-comment">;</span></code></pre> <h3 id="articleHeader6">3.可以设置header头部内容允许添加的头部信息</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="header('Access-Control-Allow-Headers:value');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code style="word-break: break-word; white-space: initial;">header('Access-Control-Allow-Headers<span class="hljs-symbol">:value</span>')<span class="hljs-comment">;</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" $.ajax({ type: &quot;GET&quot;, url: '#', header:{//添加头部信息 value:'123456' }, crossDomain: true, success: function (data) {});" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> $.ajax({ <span class="hljs-keyword">type</span>: <span class="hljs-string">"GET"</span>, url: <span class="hljs-string">'#'</span>, header:{<span class="hljs-comment">//添加头部信息</span> value:<span class="hljs-string">'123456'</span> }, crossDomain: <span class="hljs-literal">true</span>, success: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{});</code></pre> <h3 id="articleHeader7">4.发送cookie</h3> <p>需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" response.setHeader(&quot;Access-Control-Allow-Credentials&quot;,&quot;true&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code style="word-break: break-word; white-space: initial;"> response.setHeader(<span class="hljs-string">"Access-Control-Allow-Credentials"</span>,<span class="hljs-string">"true"</span>);</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" $.ajax({ type: &quot;GET&quot;, url: '#', crossDomain: true, xhrFields: {withCredentials: true},//发送cookie success: function (data) {});" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> $.ajax({ <span class="hljs-keyword">type</span>: <span class="hljs-string">"GET"</span>, url: <span class="hljs-string">'#'</span>, crossDomain: <span class="hljs-literal">true</span>, xhrFields: {withCredentials: <span class="hljs-literal">true</span>},<span class="hljs-comment">//发送cookie</span> success: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{});</code></pre> <h2 id="articleHeader8">结束</h2> <p>参考:<a href="http://www.ruanyifeng.com/blog/2016/04/cors.html" rel="nofollow noreferrer" target="_blank">跨域资源共享 CORS 详解</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

跨域总结(jquery,php)

全部内容,希望文章能够帮你解决

跨域总结(jquery,php)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过