簡單實現javascript AJAX跨域POST遠程訪問的問題

其實問題很簡單，可以POST請求，服務器也返迴響應了，是現代瀏覽器的安全機制導致本地javascript無法處理響應。調試控制台顯示：

Access to XMLHttpRequest at 'https://ip.taotu.org/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

問題是如果你本地頁面Post,瀏覽器會自動加一個header,Origin:null，返迴響應時如果服務器沒有添加響應標頭Access-Control-Allow-Origin:*，或者服務端返回的標頭value和你發出的標頭中Origin不匹配，瀏覽器客戶端便不將響應數據交給javascript處理，產生錯誤。

解決：其實很簡單，服務器後端代碼，我們只需檢測post的數據是否含有指定信息（相當於我們自己用的密碼），是的話，添加Access-Control-Allow-Origin:*，這樣客戶端就能正確處理。

總結就是AJAX跨域請求默認不允許，瀏覽器會禁止，服務端判斷情況是否需要，返回一個Access-Control-Allow-Origin:*響應標頭就OK了。

請求頁面javascript代碼：

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("queryipinfo").innerHTML =

this.responseText;

}

};

xhttp.open("POST", "https://ip.taotu.org", true);

xhttp.send('XX來自遠程請求XX'+ipdomain); //重點代碼添加的前面字符串相當於我們自己的密碼

服務端處理代碼：

Stream oPostData = Request.InputStream;

byte[] bPostByte=new byte[oPostData.Length];

oPostData.Read(bPostByte, 0, (int)oPostData.Length);

string sPostIPDomain=Encoding.UTF8.GetString(bPostByte);

bool bFromRemote;

if (sPostIPDomain.StartsWith("XX來自遠程請求XX")) //重點代碼

{

bFromRemote=true;

sPostIPDomain = Regex.Replace(sPostIPDomain,"XX來自遠程請求XX(.*)", "$1");

********省略的代碼********

if (bFromRemote) //重點代碼判斷是否返回標頭

Response.AddHeader("Access-Control-Allow-Origin", "*"); //重點代碼

附帶說下，正常的解決辦法是在服務器響應標頭中設置Access-Control-Allow-Origin:*，允許所有跨域請求，或者Access-Control-Allow-Origin:https://taotu.org，允許指定域發出的請求，這是正常網絡開發所使用的，但如果需求是像我在家裡本地發出的請求域是IP地址，並且不是固定IP，這是沒法長期解決的，所以我用了這個簡單方法解決。

我的目的是家裡本地電腦瀏覽器設置一個靜態.html文件，並且設為默認首頁，每次打開瀏覽器，通過java發送一個post請求到遠程服務器，返回我的外網IP並顯示。靜態頁面上還有一些我常用網址鏈接，還有三合一搜索引擎。

這是我搞的一個小網頁，歡迎訪問或設為首頁： https://ip.taotu.org