关于请求必应图片API的跨域问题

必应每天都会更新一张背景图片，如果我们想要在自己的网站中每天动态得更新这种图标就需要用到API去请求，必应官方API
请求实例：
https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN
参数说明：

参数名称	是否必需	可选值	参数说明
format	否	js，xml	返回数据格式，不存在返回xml格式
idx	否	0（今天），-1（截止中明天（预准备的）），1（截止至昨天，类推（目前最多获取到7天前的图片））	请求图片截止天数
n	否	1~8	返回请求数量，目前最多一次获取8张
mkt	否	zh-CN，…	地区

复制上面得地址到浏览器

url就是图片地址，拼接上域名https://cn.bing.com就可以得到图片
在实际用到自己的html中，有跨域的问题

$.ajax({type: "get",url: "https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN",success: function (response) {console.log(response);}
});

试过jsonp和CORS效果都不是很好。

解决办法

我们知道，用一台服务器去请求另外一台服务器不会有跨域问题，所以我们这里使用node创建一台服务器，把请求到的数据再返回给客户端。

const express = require('express')
const request = require('request')
const app = express()
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*')res.header('Access-Control-Allow-Headers', 'X-Requested-With, Authorization')res.setHeader('Content-Type', 'application/json;charset=utf-8')res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')res.header('X-Powered-By', ' 3.2.1')if (req.method == 'OPTIONS'){res.send('ok')return} next()
})
const imgURL = 'https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN'
request(imgURL, function (error, response, body) {console.error('error:', error); // Print the error if one occurredconsole.log('statusCode:', response && response.statusCode); // Print the response status code if a response was receivedconsole.log('body:', body); // Print the HTML for the Google homepage.app.get('/', (req, res) => {res.send(body)})
});
app.listen(80, _ => {console.log('服务器启动成功！')
})

在地址栏中输入http://127.0.0.1/

跨域请求到
然后就可以在html文件中使用

<body><img src="" alt=""><script>$.ajax({type: "get",url: "http://127.0.0.1/",success: function (response) {console.log(response);console.log(response.images[0].url);$('img').attr('src', 'https://cn.bing.com'+response.images[0].url)}});</script>
</body>

node解决关于请求必应图片API的跨域问题相关推荐

Vuejs模拟Ajax请求接口（天气预报API）跨域问题 - 案例篇
vuejs的Ajax跨域请求问题一直都是前端人员开发vue项目进程中经常遇到的不得不解决的热门问题,也是个心病. 首先看一下,页面报错内容提示: Access to XMLHttpRequest a ...
谷歌插件开发ajax请求,Chrome扩展开发，跨域请求API
起因这次问题是从Btools更换获取数据方式开始的,因为B站收藏夹在前台页面返回的数据中删除了失效视频的封面和标题,导致原来的程序无法获取视频信息. 于是我就想如果请求收藏夹的API,是否可以获取这 ...
Vue2前端请求API数据跨域问题解决
Vue2前端请求API数据跨域问题解决方法前端:Vue2 接口使用:API 问题报错提示: Access to XMLHttpRequest at 'http://localhost:9090/ec ...
图片裁剪工具vueCropper跨域解决
图片裁剪工具vueCropper跨域解决 1.报错原因:本项目的图片放在亚马逊,需求是直接拿到网络图片进行裁剪 2.解决:将图片转化成base64 Vue.prototype.getBase64Img ...
corspost请求失败_vue项目CORS跨域请求500错误，post请求变options请求
vue项目CORS跨域请求500,post请求变options请求,到底是什么情况. 提示:以下内容是一个非专业开发的我对跨域的理解,并不10分准确. 一.先介绍为什么明明发送的是Post请求,为什么 ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
图片转base64跨域问题
vue图片转base64跨域问题,亚马逊存储 1.问题说明:如果资源存在是放在国内(如七牛)在转base64的时候不会发生跨域,但本项目存储空间选择的是亚马逊S3,在转化的时候出现了跨域 2.解决 2 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
22-CMS前端页面查询开发-Api调用-跨域解决
跨域问题解决测试上边的代理 ,结果报错如下 : No 'Access-Control-Allow-Origin' header is present on the requested resou ...

node解决关于请求必应图片API的跨域问题

关于请求必应图片API的跨域问题

解决办法

node解决关于请求必应图片API的跨域问题相关推荐

最新文章

热门文章