AJAX跨域问题以及JSONP原理

一、跨域问题引入

  在之前写心理测试网站时，由于心理测试的题目内容还未拿到，所以先用本机的数据接口尝试渲染页面，而之前自己在学后台技术时，为了配置了虚拟主机，在电脑上部署了多个站点，所以就导致心理测试网站与本机的数据接口不是同源地址，即进行了跨域请求，浏览器提示如下错误：

    
    

***

AJAX跨域请求失败

二、同源策略

  上一节中提到心理测试网站与本机的数据接口不是同源地址，那么什么是同源呢？所谓同源是指协议，域名，端口完全相同，它描述的是两个地址之间的关系，以http://www.example.com/detail.html为例，感受一下什么是同源：

同源地址对比

  不同源地址之间请求我们称之为跨域请求，而在浏览器中有一种安全策略，叫同源策略，它要求只有同源的地址才可以相互通过AJAX 的方式请求。因此我才请求本机数据端口时就是使用AJAX进行了跨域请求，导致浏览器报错。
  其实我们可以通过开发者工具的Network看到，浏览器虽然报错，但还是接收了数据接口的响应内容，只不过我们不能拿到响应内容，如下图所示：

AJAX跨域请求

三、跨域方法--JSONP

  JSONP并不是唯一解决跨域问题的办法，这里只是从原理上谈论为什么JSONP可以解决跨域问题。在之前文章(https://www.jianshu.com/p/7da68374add5)中总结过目前可以请求服务端数据的方法，而img、link、script和iframe标签可以在界面时自动发送不同源请求，那么我们可否通过这些标签对服务端的响应进行响应进行操作呢？

3.1 img标签

img标签跨域请求

img拿不到响应内容

  从结果可以看到img标签可以进行跨域请求，但是看不到响应体。这是我们使用img标签请求，浏览器会按照二进制的方式理解响应内容，但实际返回的是字符串，所以没有办法拿到响应结果------淘汰该方法。

3.2 link标签

link标签

  link标签同样也能跨域请求，同时在浏览器中还可以看到相应内容，但是js中没有方法可以拿到外部引入的样式表内容，因此link标签仍不能拿到响应内容---淘汰

3.3 script标签

  考虑到script标签可以作为js进行执行，所以这里我将数据接口的响应格式设置为JavaScript同时内容以变量进行返回：

 time()
    ));
    echo "var a = {$json}"
?>

  那么此时我们就可以在浏览器通过输入a拿到响应内容了！！！！

script相应内容作为变量返回

  但此时还是存在缺陷，因为请求是异步进行的，所以我们不能直接在index.html中使用a变量。那么我们如果先定义一个函数，在数据接口返回时执行呢？

 time()
    ));
    echo "foo({$json})"
?>

  在原index.html中添加foo函数定义：

  执行结果：

script结果跨域问题

  这个方法就是现在大家常用的JSONP，当然一个标准的JSONP写法肯定不是这样，这里只是对JSONP的原理进行了说明，标准写法将在下一篇文章的进行介绍