[油猴脚本开发指南]脚本ajax的跨域请求
本节主要内容
介绍ajax和跨域问题，油猴中的ajax请求.将使⽤GM_xmlhttpRequest来绕过 同源策略做⼀个访问我们油猴中⽂⽹就会⾃动关注我们的up主(夹杂私货⼿动狗头)
本篇⽂章默认你已经懂了 XMLHttpRequest和 F12开发者⼯具(Network)，如果不懂请先补习⼀下.
AJAX
这⼀⼤段内容更多是科普和说明我们在脚本⾥⾯为什么不能直接使⽤ XMLHttpRequest去访问我们⾃⼰的api
AJAX即Asynchronous Javascript And XML，主要⽤于不刷新页⾯与⽹站后端通信.例如你在b站⽹页上的点赞/投币/收藏，在评论区翻页，就是使⽤了ajax技术.
AJAX通常使⽤XMLHttpRequest(XHR)，但是由于此api的设计不太友好，于是⼜有了Fetch API来解决这些问题，不过也有其它的封装让XHR的使⽤体验更友好，例如:axios和jQuery的ajax等.此处就不再展开.
跨域
同源策略
如果上述可以正常访问那肯定是不合理且不安全的.假如正常访问了，只是看页⾯还好，万⼀直接投币甚⾄转账那是⽆法接受的.就⽐如我可以随便从我家跑到你家看东西(GET)，放东西(POST)，丢东西(DELETE)⼀样.
然后就引出了同源策略对此来加以限制.
tampermonkey如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个⽅案也被称为“协议/主机/端⼝元组”，或者直接是 “元组”。
实际如下图所⽰，提⽰了错误.且不可以访问.
如果希望可以解决这个问题，能够让我们跨域访问，主要有 JSONP,CORS，反向代理这三种⽅式.(限
于篇幅和主题，本⽂不再详细描述)
像b站点击关注哪⾥就是使⽤的 CORS，因为⽤户页⾯的域名是:space.bilibili,⽽关注api的域名是:api.bilibili，两个域名并不符合同源策略
脚本的跨域访问
前⾯啰嗦了⼀⼤把，终于可以进⼊正题了.⾄于油猴为什么可以绕过同源策略进⾏跨域访问，就牵扯到浏览器扩展开发了，以后再说.所以扩展和脚本还是不能乱装啊，多么不安全.
如果我们需要让我们的脚本能够完全的访问其它的api，那么⼤概只有两种⽅法,⼀种是CORS，另外⼀种是通过油猴扩展去获得更⾼级的权限，让我们的脚本不受同源策略所限制.
CORS⽅法如果你调⽤的api不是⾃⼰写的，不能⾃⼰去增加CORS策略，那么就⼏乎⽆解，好处是对你的api安全.(不过都脚本了，哪⾥还管安全…)
所以脚本⼀般使⽤ GM_xmlhttpRequest API，我们需要通过 // @grant GM_xmlhttpRequest去申请此权限.
这个⽅法更详细的⽂档:GM_xmlhttpRequest，看起来像XHR+jQuery的结合体.
bilibili⾃动关注up主
如果想实现访问我们的论坛然后⾃动关注我们的up主，那么我们得先知道,bilibili关注up主的api是什么.
我们先通过f12的开发者⼯具，然后使⽤Network去查看bilibili关注up主的⽹络请求包是怎么样的.
就像写ajax请求⼀样
// ==UserScript==
// @name        油猴中⽂⽹-⾃动关注up主
// @namespace    [url=bbs.tampermonkey/]bbs.tampermonkey/[/url]
// @version      0.1
// @description  油猴中⽂⽹-⾃动关注up主
// @author      Wyz
// @match        [url=bbs.tampermonkey/]bbs.tampermonkey/[/url]
// @grant        GM_xmlhttpRequest
// @connect      api.bilibili
// ==/UserScript==
(function() {
'use strict';
GM_xmlhttpRequest({
url:"api.bilibili/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.sponseText);
}
});
})();
执⾏⼀下，弹出了下⾯内容，当然点击允许啦!不过如果你不希望弹出这个内容，那么你可以在脚本中加⼊ // @connect api.bilibili这⼀⾏来设置允许通过的域名，以进⾏屏蔽.@connect
不知道是延迟还是什么的原因，我刷新了⼏次之后才关注成功.
不过到此，虽然可以关注了，但是还不能算完，因为这个请求⾥有⼀个参数:csrf是与账号相关的，需要从cookie⾥⾯去获取，如果你直接将上⾯的脚本代码发给别⼈运⾏，因为对⽅的csrf和你的不同，那么就会输出这个内容
{"code":-111,"message":"csrf 校验失败","ttl":1}
记错了,gm_cookie是beta版本的功能，并未加⼊stable，暂时搁浅
获取cookie取出csrf这些内容就留到下⼀节吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。