Ajax跨域解决方案之jsonp

跨域问题产生的原因

之前做过会员邮箱的录入联想功能，因为数据不在我们的服务器，需要调用其他项目组的接口，虽然可以用PHP调用返回结果到页面，但是不如用ajax直接请求更方便，然而ajax是通过XmlHttpRequest请求，限制只能同源使用，子域名和端口肯定是不一样的，这样没法访问。

在这里插入图片描述

JavaScript的"同源策略"，即只有协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

常见的跨域场景

URL	说明	是否允许通信
http://www.51job.com/a.js http://www.51job.com/b.js	同一域名，不同路径	允许
http://www.51job.com:8080/a.js http://www.51job.com:8888/b.js	同一域名，不同端口	不允许
http://www.51job.com/a.js https://www.51job.com/b.js	同一域名，不同协议	不允许
http://www.51job.com/a.js http://10.100.51.148/b.js	域名和对应IP	不允许
http://www.51job.com/a.js http://ehire.51job.com/b.js	同一域名，不同子域名	不允许
http://www.51job.com/a.js http://www.51job.com/b.js	不同域名	不允许

跨域的解决方案

img、iframe 、script标签可以通过src属性请求到其他服务器上的数据，利用这一开放策略，通过动态添加script标签来调用服务器，返回是的生成的可执行js代码，数据作为回调函数的参数，执行完毕后script标签会被移除。

javascript">  $.ajax(
    {
      url: url, //路径
      async: false, //同步
      type: "get", //请求方式
      dataType: "jsonp", //跨域
      jsonp: "callback", //回调函数的参数名，可自动生成
      data: data, //发送数据
      cache: false,
      /*发送前执行方法*/
      beforeSend: function () { },
      /*成功执行方法*/
      success: function (res) {
          res = eval(res); //执行
          data = unescape(res).split('\t'); //解码
	  },
      /*完成执行方法*/
      complete: function () { },
      /*失败执行方法*/
      error: function () { }
    });

注意只支持 get方式，也可以用 iframe 设置 src 指向本地域的代理文件，监听引入外部 html 并在 window.name 对象里存取数据，但要及时销毁。

服务器端也需要更改配置，允许任何域发起的请求都可以获取当前服务器的数据，但是非常不安全，容易受到XSS攻击，通常会做白名单限制。

    //api 入口
	if (in_array($requestHost,[$domainInt['host']])) {//允许跨域
	    header('Access-Control-Expose-Headers: Apistatus,Content-Disposition');
	    header('Access-Control-Allow-Origin:*');
	}