The Cross-domain problem of Native js implementing ajax

< script >

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && (xmlhttp.status>=200&&xmlhttp.status<=300))
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }else{
            alert(xmlhttp.status);
        }
    }
        xmlhttp.open("GET","https://api.shenjian.io/promovie/piaofang?appid=fed023bfdffa5202e08665601d127045/",true);
        xmlhttp.send(null);
}

< / script >

write this for the first time, ask the boss to see what the problem is?
ajax, encapsulated with jQ can successfully obtain data by changing datatype from JOSN to JSONP, but if you want to implement it with a native method, it"s still a big problem

.

< script >

var url="https://api.shenjian.io/promovie/piaofang?appid=fed023bfdffa5202e08665601d127045";
          
           //xhr
           function createCORSXhr(url,method){
                var xhr=new XMLHttpRequest();
                if("withCredentials" in xhr){
                          xhr.open(method,url,true);                         
                    }else if(typeof XDomainRequest !=="undefined"){
                          xhr=new XDomainRequest();                            
                          xhr.open(method,url);    
                     }else
                          xhr=null;
                     return xhr;                     
                }
           
           //ajax
           function sendAjaxRequest(){
                var xhr=createCORSXhr(url,"get");
                //xhr.setRequestHeader("Origin","https://api.shenjian.io/promovie/piaofang?appid=fed023bfdffa5202e08665601d127045")   
                xhr.onload=function(){
                     if(xhr.readyState==4){
                     if(xhr.status>=200 && xhr.status<300 || xhr.status==304)
                          alert(xhr.responseText);
                          }else{
                               alert(" ajax error...")
                               }
                     }
                };
                xhr.onerror=function(){
                     alert("error code:"+xhr.status)
                }
                xhr.send(null);
                };

           sendAjaxRequest()

< / script >
someone wrote this on the Internet. He said that he could support cross-domain, but I tried to report the same mistake

.
Nov.23,2021

Cross-domain is restricted on the server side. Cross-domain requests can be made with ajax only if the server sets the interface to cross-domain. The reason why jsonp can cross-domain is that jsonp is not an ajax request. Jsonp constructs a script tag in html to request server resources, which is actually a get request, so it can cross-domain. The general solution to the cross-domain problem is to use NGINX to forward it on your static code server. If you need to forward it during development, you can use node to build a local proxy server.


now the server is helping you cross the domain. If you just don't have to think about this problem at the front end, jsonp is not much used now. Now there are many middleware automated build tools that can help you complete the cross-domain problem after registration. Let me introduce you to several cross-domain methods. You can remember that if the server is node, the header header can cross-domain. Forget the three detailed header headers. You can also register the middleware cors (), which can also be cross-domain or node-fetch can also complete cross-domain, in a word, cross-domain is no longer a front-end need to consider too much.


Native cross-domain requires server cooperation

it is recommended to take a look at this cors cross-domain


you have only done half the work in this way, and cors still needs the cooperation of the server.


cors needs the backend to return the corresponding header, error prompt,

No 'Access-Control-Allow-Origin' header is present on the requested resource.
There is no Access-Control-Allow-Origin in the response header returned by the

backend.

then jsonp does not use the xhr object to send the request. The specific method can be used to search the jsonp principle


jquery ajax that is misleading, JSONP is not ajax, at all, and there is no content type such as JSONP


jsonp has nothing to do with ajax.
it's just that the jsonp encapsulated by jquery feels like ajax, misleading the novice.
it is recommended that the landlord first find out what jsonp, is and then look back at this problem.


stop asking me cross-domain questions

Menu