什么是跨域
跨域:两个网站之间协议头、域名、端口号任意一个不同就是跨域。
同源:两个网站之间协议头、域名、端口号都一致就是同源。
有时,我们使用ajax访问一个api,不能访问成功,并且报错,如下。
此时,我们已经是跨域访问了,但是我们仍要访问,那么怎么解决呢。
跨域解决方案——jsonp
常见的跨域解决方案是jsonp,该方法比较简单,不涉及太多后端的知识。
首先我们了解一下jsonp解决跨域的原理
jsonp原理
jsonp原理是使用不受跨域限制的标签发起请求,然后再将响应体转换为js能够识别的内容。能够跨域发送请求的标签有,link,script,img等,但是link、img会分别将响应体以样式表和图片进行解析,得不到我们想要的内容,那么script能够将响应体以js格式进行解析,最终得到我们想要的内容。接下来,就是具体步骤。
- 创建一个函数,并给该函数一个参数用来接收响应体,该函数用于对响应体进行操作。
function handle(response){
console.log(response);
}
- 使用script标签发送请求,并将函数名作为参数传入
<script src="https://api.jisuapi.com/mobileluck/query?mobile=13566666666&appkey=cdd63426d9c555c0&callback=handle"></script>
- 在声明的函数中对响应结果进行操作
function handle(response){
console.log(response.result);
}
跨域请求成功,此方法可以解决跨域问题。
跨域资源共享
跨域资源共享也可以解决跨域问题
该方法主要是在后端请求头中添加Access-Control-Allow-Origin:*
此处以php文件进行模拟
<?php
header("Access-Control-Allow-Origin:*");
添加如上代码后,就可以在前端页面中发起跨域请求
此外,还可以使用jQuery中的getJSON方法实现跨域请求
jQuery.getJSON
$.getJSON("https://api.jisuapi.com/astro/all?&callback=?", {
appkey: "cdd63426d9c555c0"
}, function(res) {
console.log(res);
});
此时,我们成功获取数据,以上就是跨域请求的一些方法。