ajax跨域简介

什么是跨域

跨域：两个网站之间协议头、域名、端口号任意一个不同就是跨域。
同源：两个网站之间协议头、域名、端口号都一致就是同源。
有时，我们使用ajax访问一个api，不能访问成功，并且报错，如下。

此时，我们已经是跨域访问了，但是我们仍要访问，那么怎么解决呢。

跨域解决方案——jsonp

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

jsonp原理

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

1. 创建一个函数，并给该函数一个参数用来接收响应体，该函数用于对响应体进行操作。

function handle(response){
console.log(response);
}

2. 使用script标签发送请求，并将函数名作为参数传入

<script src="https://api.jisuapi.com/mobileluck/query?mobile=13566666666&appkey=cdd63426d9c555c0&callback=handle"></script> 

3. 在声明的函数中对响应结果进行操作

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);
   });

此时，我们成功获取数据，以上就是跨域请求的一些方法。