No 'Access-Control-Allow-Origin' Ajax跨域訪問解決方案

標籤：使用   ip）   之間   header   response   遠程   ros   requested   預設   

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

當使用ajax訪問遠程伺服器時，請求失敗，瀏覽器報如上錯誤。這是出於安全的考慮，預設禁止跨域訪問導致的。

一、什麼是跨域訪問

舉個栗子：在A網站中，我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個域中，那麼就出現了跨域訪問問題。你可以理解為兩個網域名稱之間不能跨過網域名稱來發送請求或者請求資料，否則就是不安全的。跨域訪問違反了同源策略，同源策略的詳細資料可以點擊如下連結：Same-origin_policy；
總而言之，同源策略規定，瀏覽器的ajax只能訪問跟它的HTML頁面同源（相同網域名稱或IP）的資源。

二、解決方案

常用的解決方案有兩種，可以分為用戶端解決方案和伺服器端解決方案。先說伺服器端解決方案：

伺服器端解決方案
在伺服器端的filter或者servlet裡面添加
response.setHeader("Access-Control-Allow-Origin", "*");
“Access-Control-Allow-Origin”表示允許跨域訪問，“*”表示允許所有來源進行跨域訪問，這裡也可以替換為特定的網域名稱或ip。
很顯然，這種方式對非網站擁有人員來說是不能做到的。而且此種方式很容易受到CSRF攻擊。

用戶端解決方案

$(function($){
var url = ‘http://*****/index‘;
$.ajax(url, {
data: {
‘cityname‘: ‘成都‘,
‘date‘: ‘2016.12.12‘
},
dataType: ‘jsonp‘,
crossDomain: true,
success: function(data) {
if(data && data.resultcode == ‘200‘){
console.log(data.result.today);
}
}
});

將ajax請求中的dataType屬性設定為“jsonp”，jsonp是專門用來解決跨域訪問而誕生的。

No 'Access-Control-Allow-Origin' Ajax跨域訪問解決方案