The problem of simple implementation of javascript AJAX cross-domain POST remote access

In fact, the problem is very simple. You can POST the request, and the server also returns a response. It is the security mechanism of modern browsers that prevents local javascript from processing the response. The debug console shows:

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.

The problem is that if you post a local page, the browser will automatically add a header, Origin: null, and if the server does not add the response header Access-Control-Allow-Origin: * when returning the response, or the header value returned by the server is the same as yours If the Origin in the sent header does not match, the browser client will not hand over the response data to javascript for processing, resulting in an error.

Solution: In fact, it is very simple, the server back-end code, we only need to check whether the post data contains the specified information (equivalent to our own password), if yes, add Access-Control-Allow-Origin:*, so that the client can can be handled correctly.

The summary is that AJAX cross-domain requests are not allowed by default, and the browser will prohibit them. The server judges whether the situation is necessary, and returns an Access-Control-Allow-Origin:* response header and it is OK.

Request page javascript code:

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 comes from remote request XX'+ipdomain); //The previous string added by the key code is equivalent to our own password

Server-side processing code:

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 comes from remote request XX")) //key code

{

bFromRemote=true;

sPostIPDomain = Regex.Replace(sPostIPDomain,"XX comes from remote request XX(.*)", "$1");

*********Omitted Code********

if (bFromRemote) //Key code to judge whether to return the header

Response.AddHeader("Access-Control-Allow-Origin", "*"); //key code

By the way, the normal solution is to set Access-Control-Allow-Origin: * in the server response header to allow all cross-domain requests, or Access-Control-Allow-Origin: https://taotu.org to allow The request sent by the specified domain is used by normal network development, but if the requirement is that the request domain sent locally at home is an IP address, and it is not a fixed IP, this cannot be solved for a long time, so I used this Simple solution.

My purpose is to set a static .html file in the browser of the local computer at home, and set it as the default homepage. Every time I open the browser, I send a post request to the remote server through java, and return my external network IP and display it. There are also some of my frequently used website links on the static page, as well as a three-in-one search engine.

This is a small webpage I made, welcome to visit or set it as the homepage: https://ip.taotu.org