JS XMLHttpRequest本地跨域问题，XMLHttpR

作者: 史梦辰 | 来源:发表于2018-12-02 14:09 被阅读0次

JS XMLHttpRequest本地跨域问题，XMLHttpR
js XMLHttpRequest请求数据+简单封装【前端基础篇
Ajax使用专题
散扯Ajax
AJAX出现两次请求 options和get|post
JS Ajax
jsonp跨域
【调试错误】Access to XMLHttpRequest a
No 'Access-Control-Allow-Origin'
跨域

问题1
最近在学习AJAX,做小练习的时候，同一个AJAX请求，在Chrome里调试的时候就会提示跨域问题。如下

WechatIMG2.jpeg
查阅资料发现是因为Chrome的安全策略导致的，我的解决办法是通过打开一个新的可跨域的chrome窗口实现的：
1.打开终端
2.输入下面的命令( 需要替换路径中的yourname )

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/

这是在mac的根目录在建了一个叫MyChromeDevUserData的文件夹，用于保存关闭安全策略后的用户信息的，名字可以随意取，位置也可以随意放，只要路径是正确的就可以。
3.第一次打开chrome有黄色背景色的“--disable-web-security”相关的提示，说明浏览器设置跨域成功。

问题2
接着当我发现我的xmlhttprequest.status==0

if (xmlhttp.readyState == 4) {
        if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) {
            alert(xmlhttp.status);

http协议里可是没这个状态码的，这个时候如果还用if(xmlHttp.status==200)来判断运行，则会毫无结果。如果要在本地测试，最好写成if(xmlHttp.status== 200 || xmlHttp.status==0)

if (xmlhttp.readyState == 4) {
        if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 0) {
            alert(xmlhttp.status);

这时候就有返回结果了。

贴一下我的代码
CDShow.html

<!DOCTYPE html>
<html>

<head>
    <title>CD SHOW</title>
</head>

<body>
    <div id="copy">
        <button onclick="loadXMLDoc('xml/cd_catalog.xml')">Get CD INFO</button>
    </div>
    <script type="text/javascript" src="js/cd_show.js"></script>
</body>

</html>

cd_show.js

var xmlhttp;

function loadXMLDoc(url) {

    xmlhttp = null;
    if (window.XMLHttpRequest) {
        //code for IE7,Firefox,Mozilla,etc.
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        //code for IE5,IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xmlhttp != null) {
        xmlhttp.onreadystatechange = onResponse;
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);

    } else {
        alert("Your browser does not support XMLHTTP.");
    }
}

function onResponse() {
    if (xmlhttp.readyState == 4) {
        if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 0) {
            alert(xmlhttp.status);
            txt = "<table border='1'>";
            x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
            for (i = 0; i < x.length; i++) {
                txt = txt + "<tr>";
                xx = x[i].getElementsByTagName("TITLE");
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                } catch (er) {
                    txt = txt + "<td></td>";
                }
                xx = x[i].getElementsByTagName("ARTIST");
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                } catch (er) {
                    txt = txt + "<td></td>";
                }
                txt = txt + "</tr>";
            }
            txt = txt + "</table>";
            document.getElementById('copy').innerHTML = txt;
        }
    }
}

cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
         <TITLE>Empire Burlesque</TITLE>
         <ARTIST>Bob Dylan</ARTIST>
         <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
         <YEAR>1985</YEAR>
</CD>
<CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
</CATALOG>

结果：

image.png