AJAX通常使用 XMLHttpRequest(XHR),但是由于此api的设计不太友好,于是又有了 Fetch API 来解决这些问题,不过也有其它的封装让XHR的使用体验更友好,例如:axios和jQuery的ajax等,此处就不再展开.
跨域
即两个不同域名之间的访问.例如 访问我们 A网 就会自动获取 B网 的信息(自动关注我们的up主)),那么肯定就需要从我们的域名 https://A.cn/ 访问到 https://B.cn/ 的域名,这就产生了跨域访问.
同源策略
如果上述可以正常访问那肯定是不合理且不安全的.假如正常访问了,只是看页面还好,万一直接投币甚至转账那是无法接受的.就比如我可以随便从我家跑到你家看东西(GET),放东西(POST),丢东西(DELETE)一样.
然后就引出了同源策略对此来加以限制.
如果两个 URL 的 protocol、port(如果有指定的话) 和 host 都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是 “元组”。
实际如下图所示,提示了错误.且不可以访问:
如果希望可以解决这个问题,能够让我们跨域访问,主要有 JSONP,CORS,反向代理这三种方式.(自行查阅这三种方法的原理和使用)
像b站点击关注哪里就是使用的 CORS,因为用户页面的域名是:space.bilibili.com,而关注api的域名是:api.bilibili.com,两个域名并不符合同源策略;
脚本的跨域访问
至于油猴为什么可以绕过同源策略进行跨域访问,就牵扯到浏览器扩展开发了,以后再说.所以扩展和脚本还是不能乱装啊,多么不安全.
如果我们需要让我们的脚本能够完全的访问其它的api,那么大概只有两种方法,一种是CORS,另外一种是通过油猴扩展去获得更高级的权限,让我们的脚本不受同源策略所限制.
CORS方法:如果你调用的api不是自己写的,不能自己去增加CORS策略,那么就几乎无解,好处是对你的api安全.(不过都脚本了,哪里还管安全....)
所以脚本一般使用 GM_xmlhttpRequest
API,我们需要通过 //@grant GM_xmlhttpRequest
去申请此权限,这个方法更详细的文档:GM_xmlhttpRequest,看起来像XHR+jQuery的结合体;
例子
如果想实现访问我们的 A.cn论坛 然后自动关注 bilibili.com上的某个up主,那么我们得先知道,bilibili关注up主的api接口是什么;
// ==UserScript==
// @name 自动关注up主
// @namespace https://A.cn/
// @version 0.1
// @description 自动关注up主
// @author W
// @match https://A.cn/
// @grant GM_xmlhttpRequest
// @connect api.bilibili.com
// ==/UserScript==
(function() {
'use strict';
GM_xmlhttpRequest({
url:"https://api.bilibili.com/x/relation/modify",
method :"POST",
data:"fid=1037793830&act=1&re_src=11&jsonp=jsonp&csrf=e37f1881fd98f16756d16ab71109d37a",
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
onload:function(xhr){
console.log(xhr.responseText);
}
});
})();
执行一下,会弹出一个提示,当然点击允许啦!不过如果你不希望弹出这个内容,那么你可以在脚本中加入 // @connect api.bilibili.com
这一行来设置允许通过的域名,以进行屏蔽;
这个 @connect 属性的用法:https://www.tampermonkey.net/documentation.php#_connect;
需要注意的是,这个请求里有一个参数:csrf是与账号相关的,需要从cookie里面去获取,如果你直接将上面的脚本代码发给别人运行,因为对方的csrf和你的不同,那么就会输出这个内容
{"code":-111,"message":"csrf 校验失败","ttl":1}