淘先锋技术网

首页 1 2 3 4 5 6 7

什么是跨域

跨域:两个网站之间协议头、域名、端口号任意一个不同就是跨域。
同源:两个网站之间协议头、域名、端口号都一致就是同源。
有时,我们使用ajax访问一个api,不能访问成功,并且报错,如下。
在这里插入图片描述
此时,我们已经是跨域访问了,但是我们仍要访问,那么怎么解决呢。

跨域解决方案——jsonp

常见的跨域解决方案是jsonp,该方法比较简单,不涉及太多后端的知识。
首先我们了解一下jsonp解决跨域的原理

jsonp原理

jsonp原理是使用不受跨域限制的标签发起请求,然后再将响应体转换为js能够识别的内容。能够跨域发送请求的标签有,link,script,img等,但是link、img会分别将响应体以样式表和图片进行解析,得不到我们想要的内容,那么script能够将响应体以js格式进行解析,最终得到我们想要的内容。接下来,就是具体步骤。

  1. 创建一个函数,并给该函数一个参数用来接收响应体,该函数用于对响应体进行操作。
function handle(response){
console.log(response);
}
  1. 使用script标签发送请求,并将函数名作为参数传入
  1. 在声明的函数中对响应结果进行操作
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);
   });

在这里插入图片描述
此时,我们成功获取数据,以上就是跨域请求的一些方法。