</div>
<div class="article-info-box">
<div class="article-bar-top d-flex">
<span class="time">2017年05月28日 17:23:11</span>
<div class="float-right">
<span class="read-count">閱讀數：49358</span>
</div>
</div>
</div>
</div>
</div>
<article>
<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post">
<div class="markdown_views">
<h3 id="為什麼會出現跨域"><a name="t0"></a>為什麼會出現跨域</h3>
- 跨域問題來源于JavaScript的同源政策，即隻有 協定+主機名+端口号 (如存在)相同，則允許互相通路。也就是說JavaScript隻能通路和操作自己域下的資源，不能通路和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題，比如a标簽、script标簽、甚至form标簽（可以直接跨域發送資料并接收資料）等
ajax跨域問題（三種解決方案
如何解決跨域問題
-
JSONP
JSONP是JSON with Padding的略稱。它是一個非官方的協定，它允許在伺服器端內建Script tags傳回至用戶端，通過javascript callback的形式實作跨域通路（這僅僅是JSONP簡單的實作形式）。關于jsonp的使用方式，可以參考http://blog.csdn.net/alen1985/article/details/6365394，優缺點可以參考http://blog.csdn.net/z69183787/article/details/19191385
-
添加響應頭，允許跨域
addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源通路
addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許通路的方式
-
代理的方式
伺服器A的test01.html頁面想通路伺服器B的背景action，傳回“test”字元串，此時就出現跨域請求，浏覽器控制台會出現報錯提示，由于跨域是浏覽器的同源政策造成的，對于伺服器背景不存在該問題，可以在伺服器A中添加一個代理action，在該action中完成對伺服器B中action資料的請求，然後在傳回到test01.html頁面。
Demo1(添加允許跨域請求的響應頭)
- html頁面
ajax跨域問題（三種解決方案 - Web背景
ajax跨域問題（三種解決方案 按照上面的通路，由于127.0.0.1:8080和localhost:8081的域和端口不同，是以同樣會出現跨域問題。 ajax跨域問題（三種解決方案 ajax跨域問題（三種解決方案
現在用添加響應頭的方式
Demo2(jsonp的callback方式)
這裡示範的是jquery的ajax，背景采用的是webservice接口形式
注意此時的dataType為jsonp格式，看看背景的接收
，
我們傳回的其實就是一個函數的調用文本，這裡注意，callback的名稱，由于前台沒有指定callback函數，是以這裡自動生成了，如果想自定義回調函數名稱如下操作，添加一行請求參數
這樣背景的回調函數名就變成了mytest
浏覽器發出的請求格式和響應資料如下，其實就是傳回函數的調用，而需要傳回的資料則以函數參數值的形式填入
此時控制台就能夠擷取到“hello world”
推薦參考資料：
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
</article>
<div class="article-bar-bottom" style="height: 54px; overflow: hidden;">
<div class="article-copyright">
版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/u014727260/article/details/72793459 </div>
<div class="tags-box artic-tag-box">
<span class="label">文章标簽：</span>
<a data-track-click="{"mod":"popu_626","con":"ajax"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=ajax&t=blog" target="_blank" rel="external nofollow" target="_blank">ajax </a><a data-track-click="{"mod":"popu_626","con":"javascript"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=javascript&t=blog" target="_blank" rel="external nofollow" target="_blank">javascript </a><a data-track-click="{"mod":"popu_626","con":"jsonp"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=jsonp&t=blog" target="_blank" rel="external nofollow" target="_blank">jsonp </a><a data-track-click="{"mod":"popu_626","con":"webservice"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=webservice&t=blog" target="_blank" rel="external nofollow" target="_blank">webservice </a>
</div>
<div class="tags-box">
<span class="label">個人分類：</span>
<a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529969" target="_blank" rel="external nofollow" target="_blank">javascript </a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529979" target="_blank" rel="external nofollow" target="_blank">jquery </a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529971" target="_blank" rel="external nofollow" target="_blank">HTML </a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6549773" target="_blank" rel="external nofollow" target="_blank">webservice </a>
</div>
<div class="tags-box hot-word">
<span class="label">相關熱詞：</span>
<a class="tag-link" href="https://blog.csdn.net/qq_28632173/article/details/50754699" target="_blank" rel="external nofollow" target="_blank">
ajax和 </a>
<a class="tag-link" href="https://blog.csdn.net/oTengYue/article/details/51598277" target="_blank" rel="external nofollow" target="_blank">
ajax與 </a>
<a class="tag-link" href="https://blog.csdn.net/fan510988896/article/details/71520390" target="_blank" rel="external nofollow" target="_blank">
下載下傳圖檔ajax </a>
<a class="tag-link" href="https://blog.csdn.net/u014656173/article/details/67646372" target="_blank" rel="external nofollow" target="_blank">
中文亂碼ajax </a>
<a class="tag-link" href="https://blog.csdn.net/j080624/article/details/73775835" target="_blank" rel="external nofollow" target="_blank">
判斷ajax </a>
</div>
<div class="article_info_click" style="left: 326px; width: auto; top: 24px;">▼檢視關于本篇文章更多資訊</div></div>
<!-- !empty($pre_next_article[0]) -->
<div class="related-article related-article-prev text-truncate">
<a href="https://blog.csdn.net/u014727260/article/details/72676508" target="_blank" rel="external nofollow" >
<span>上一篇</span>辦公自動化學習網站 </a>
</div>
<div class="related-article related-article-next text-truncate">
<a href="https://blog.csdn.net/u014727260/article/details/73441246" target="_blank" rel="external nofollow" >
<span>下一篇</span>正向代理和反向代理 </a>
</div>
</div>