前端调用 壁纸API 接口跨域问题暴力解决方案！

背景：

        闲来无事做了个网页，突然想到了搞一个随机壁纸功能试试（每次刷新页面，壁纸都不同）。然后就在网上找了找免费接口。紧接着就出现了跨域问题。

        由于我是用原生html、css、javascript写的页面。就想想有没有什么简单的方案解决跨域，于是就想到了jsonp去解决。代码如下：

 function handleData(data) {
        console.log("Name: " + data.name);
        console.log("Age: " + data.age);
    }
 function fetchData() {
        var script = document.createElement('script');
        script.src = 'http://www.example.com/data.json?callback=handleData';
        document.body.appendChild(script);
    }

    // 调用 fetchData 函数来触发 JSONP 请求
    fetchData();

         JSONP 的工作原理是利用 script 标签可以跨域加载资源的特性。当需要跨域获取数据时，客户端会创建一个 script 标签，其 src 属性指向包含 JSON 数据的 URL，同时还会传递一个回调函数的名称作为查询参数。服务器收到请求后，会将 JSON 数据作为参数传递给该回调函数，并在响应中返回这个函数的调用。客户端接收到响应后，即可通过定义的回调函数处理返回的数据。

        随后就发现一个问题，报错了 。

        看了接口发现，原来是接口返回的是一张图片，使用jsonp方式调用接口的话。浏览器发现要执行的文件是一个 JPEG 图片（MIME 类型为 image/jpeg），而不是可执行的脚本，因此会拒绝执行。

        然而，我又嫌另外开一个后台代理接口的话比较麻烦。

暴力解决：

        思来想去。想出了一个暴力的解决方案。因为接口地址直接返回的是一张图片嘛，所以我直接把接口地址放到了div的background-image的url里面。

        //接口地址
        let imgUrl = 'https://www.yumus.cn/api/?target=img&ua=pc'
        const bgImg = document.getElementById('backgroundImage')
        //背景图片的url
        bgImg.style.backgroundImage = 'url('+ imgUrl +')';
        //图片自适应div大小
        bgImg.style.backgroundSize = 'cover'
        bgImg.style.backgroundRepeat = 'no-repeat'

这样设置之后，发现问题直接解决了！！！

总结：

        这种方案也是因为接口直接返回一张图片地址的原因。因此可以直接用。如果是返回的json对象的话，那使用jsonp方法就直接可以解决跨域问题了。

        最后推荐两个链接：

这个是免费壁纸接口：

壁纸接口 - 语幕 (yumus.cn)

这个是跨域问题解决方案，当做复习了。

9种常见的前端跨域解决方案（详解） - 知乎 (zhihu.com)