背景:
闲来无事做了个网页,突然想到了搞一个随机壁纸功能试试(每次刷新页面,壁纸都不同)。然后就在网上找了找免费接口。紧接着就出现了跨域问题。
由于我是用原生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方法就直接可以解决跨域问题了。
最后推荐两个链接:
这个是免费壁纸接口:
这个是跨域问题解决方案,当做复习了。