跨域请求

作者: SingleDiego | 来源:发表于2018-05-24 11:05 被阅读84次

AJAX出现两次请求 options和get|post
axios发送俩次请求的原因
用express实现CORS跨域
跨域
跨域
axios 跨域请求(前后端分离)
Http访问跨域解决
跨域
JSONP跨域请求的小尝试
Provisional headers are shown ||

知识点：

permissions

跨域指的是 JavaScript 通过 XMLHttpRequest 请求数据时，调用 JavaScript
的页面所在的域和被请求页面的域不一致。对于网站来说，浏览器出于安全考虑是不允许跨域。另外，对于域相同，但端口或协议不同时，浏览器也是禁止的。下表给出了进一步的说明：

URL	说明	是否允许请求
http://a.example.com/ ， http://a.example.com/a.txt	同域下	允许
http://a.example.com/， http://a.example.com/b/a.txt	同域下不同目录	允许
http://a.example.com/， http://a.example.com:8080/a.txt	同域下不同端口	不允许
http://a.example.com/， https://a.example.com/a.txt	同域下不同协议	不允许
http://a.example.com/， http://b.example.com/a.txt	不同域下	不允许
http://a.example.com/， http://a.foo.com/a.txt	不同域下	不允许

但这个规则如果同样限制 Chrome 扩展应用，就会使其能力大打折扣，所以
Google 允许 Chrome 扩展应用不必受限于跨域限制。但出于安全考虑，需要在 Manifest 的 permissions 属性中声明需要跨域的权限。

比如，如果我们想设计一款获取维基百科数据并显示在其他网页中的扩展，就要在 Manifest 中进行如下声明：

{
    ...
    "permissions": [
        "*://*.wikipedia.org/*"
    ]
}

这样Chrome就会允许你的扩展在任意页面请求维基百科上的内容了。

我们可以利用如下的代码发起异步请求。（详细 ajax 操作参见：原生 Javascript 收发 AJAX）

function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var resp = JSON.parse(xhr.responseText);
            callback(resp);
        }
    }
    xhr.send();
}

鉴于原教程的网址早不提供服务了，下面来写一个新的小 Demo，利用异步请求原来写一个向豆瓣 API 查询图书信息的插件。

编写 manifest.json：

{
    "manifest_version": 2,
    "name": "ISBN查询",
    "version": "1.0",
    "description": "根据ISBN查询书目信息",
    "icons": {
        "16": "images/icon.png",
        "48": "images/icon.png",
        "128": "images/icon.png"
    },

    "browser_action": {
        "default_icon": {
            "19": "images/icon.png",
            "38": "images/icon.png"
        },
        "default_title": "ISBN查询",
        "default_popup": "popup.html"
    },
    // 设置权限
    "permissions": [
        "*://api.douban.com/v2/book/isbn/*"
    ]
}

上面的 Manifest 定义了这个扩展允许对 "*://api.douban.com/v2/book/isbn/*"
发起跨域请求。

popup.html 的结构也完全可以按照时钟的扩展照抄下来，只是个别元素的 id 和脚本的路径根据当前扩展的名称稍加更改，不再赘述。

<html>

<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 250px;
        height: 300px;
    }

    div {
        line-height: 50px;
        font-size: 20px;
        /*text-align: center;*/
    }
    </style>

</head>

<body>
    <div>
        <h4>ISBN: <input type="text" name="ISBN", id="ISBN"></h4>
    </div>
    
    <div>
        <h4 id="title">Title:</h4>
    </div>

    <br>

    <div>
        <button id="search">search</button>
    </div>

    <script src="js/isbn.js"></script>
</body>

</html>

下面编写 my_ip.js：

// 对某 url 发起异步请求，接收返回的数据传给回调函数执行
function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var resp = JSON.parse(xhr.responseText);
            callback(resp);
        }
    }
    xhr.send();
}


var search = function() {
    var isbn = document.getElementById('ISBN').value // 获取输入框的 isbn 值
    var url = 'https://api.douban.com/v2/book/isbn/' + isbn // 构建豆瓣 api 的 url

    httpRequest(url=url, function(r) {
        // 把返回的数据显示在相应位置
        var title = r['title']
        document.getElementById('title').innerHTML = 'Title: ' + title
    })
}

// 选择到按钮
var search_button = document.getElementById("search")

// 把相关函数和点击按钮事件绑定
search_button.addEventListener("click", function(){
    search()
})

调试运行：