ajax跨域問題（三種解決方案）

為什麼會出現跨域

• 跨域問題來源於JavaScript的同源策略，即只有 協議+主機名+埠號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題，比如a標籤、script標籤、甚至form標籤（可以直接跨域發送數據並接收數據）等

如何解決跨域問題

• 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頁面

• Web後台

• 按照上面的訪問，由於127.0.0.1:8080和localhost:8081的域和埠不同，所以同樣會出現跨域問題。

現在用添加響應頭的方式

Demo2(jsonp的callback方式)

這裡演示的是jquery的ajax，後台採用的是webservice介面形式

注意此時的dataType為jsonp格式，看看後台的接收

，

我們返回的其實就是一個函數的調用文本，這裡注意，callback的名稱，由於前台沒有指定callback函數，所以這裡自動生成了，如果想自定義回調函數名稱如下操作，添加一行請求參數

這樣後台的回調函數名就變成了mytest

瀏覽器發出的請求格式和響應數據如下，其實就是返回函數的調用，而需要返回的數據則以函數參數值的形式填入

此時控制台就能夠獲取到「hello world」

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！