前端跨域新思路——油猴脚本

本文默认你会用油猴脚本
本文默认你知道什么是跨域

最开始，我想做一个玩具网站，部署在Gitee Pages上自用，调用了其他网站的接口，但是跨域不让调。于是马上想到以下方案：

• nginx代理，没钱买服务器，本地启一个稍显些笨重
• 找个免费的Serverless服务白嫖一下，不一定稳定，功能很简单，也不是很有必要

于是我就想，有没有什么骚操作，还真让我想到了——油猴脚本。油猴提供了GM_xmlhttpRequest可以发跨域请求，那我是不是可以在油猴里把这个方法注入到我的网页里。

只需要一行代码

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match       */*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';
    unsafeWindow._GM_xmlhttpRequest=GM_xmlhttpRequest
})();

别忘了在@grant中添加GM_xmlhttpRequest，否则是用不了GM_xmlhttpRequest的,

然后在我的项目代码中打印了一下window._GM_xmlhttpRequest，还真打印出来了。接下来就是调用了,用起来也很简单。

 window._GM_xmlhttpRequest({
        url:'',
        method:'get',
        data
        headers
        onload: function (xhr) {
            console.log(JSON.parse(xhr.responseText))
        }
        onerror
      })

promise的时代，这个用起来不够优雅，简单封装一下

function useGMXmlhttpRequest() {
  return (params) =>
    new Promise((resolve, reject) => {
      if (!window._GM_xmlhttpRequest) {
        //可能没有油猴脚本
        return reject()
      }
      window._GM_xmlhttpRequest({
        ...params,
        onload(xhr) {
          resolve(JSON.parse(xhr.responseText))
        },
        onerror(e) {
          reject(e)
        }
      })
    })
}

调用

  let GMXmlhttpRequest = useGMXmlhttpRequest()
  
  GMXmlhttpRequest({
    url: ``
  }).then((res) => {
    
  })

完成