js 跨域的几种常见解决方案

1. JSONP(JSON with Padding)

JSONP 技术的原理介绍

jsonp 的实现是基于html标签中src属性的数据源特性, 部分 html 标签比如 img script 可以通过 src 进行跨域访问,而浏览器不可能对这一行为进行阻止,虽然,浏览不支持js语言直接进行跨域http请求,但是我们可以间接的通过 src 属性从服务器返回一个 js 回调函数 从而实现跨域请求的目的

1. 简单的例子

浏览器端

       <script type="text/javascript">
         // 1 定义一个带参数回调函数
          function fn(data){
             alert(data);
          }
       </script>

        //2 通过 srcipt标签的 src 属性从服务器返回一个 fn(data)回调 
      <script src='http://www.test.com/jsonp/callJs.php'></script>

服务器 php 端

     <?php
       // 3 返回一个在请求页里定义好的js函数,并把参数返回 
       echo "fn('你好')";

2. 简单封装

1封装JS函数

function jsonp(params) {
//获取 head 标签
var head = document.querySelector('head');
//创建 script 标签
var script = document.createElement('script');
//创建回调函数
var call = "fn" + new Date().getTime();
window[call] = function(arg) {
console.log(arg);
params.success(arg);
// alert(3);
}
//请求 参数中 url 地址 并将 回调函数做为参数添加到 url 
script.src = params.url + '?callback=' + call;
head.appendChild(script);

}

# 2 在 html 中引用

<script src="./jsonp.js" /></script>
<script type="text/javascript">
    // 调用封装好的方法 并传递 url 和 请求成功后的回调函数
    jsonp({
        url: "http://www.longtaoge.com/jsonp/php/js.php",
        success: function(repose) {
            console.log(repose);
            //处理数据
            fillData(repose);
        }
    });

</script>

3 php返回数据

<?php
    //获取Get 请求中 jsop 的回调
    $cal=!empty($_GET['callback'])?$_GET['callback']:'';
    //从文件中读取数据并返回
    $va=file_get_contents("../data/data.json");
    //返回数据
    echo $cal.'('.$va.')';
    ?>

3. 模似封装 ajax

# 1 封装 ajax 函数

//声明一个对象
function $() {

}
//模仿ajax 函数
$.ajax = function(params) {
//获取参数 请示地址 
var url = params.url || location.pathname;
var type = params.type || 'get'; //请求方式
var data = params.data || {};  //获取请求参数
var dataType = params.dataType; //jsonp

//如果需要跨域 
if (dataType == 'jsonp') {
    var head = document.querySelector('head');
    var script = document.createElement('script');
    //模仿jQuery 的回调函数
    var call = 'jQuery' + new Date().getTime();
    url = url + '?callback=' + call;
    if (type == "get") { // 通过Get 请求添加附加参数
        url += "&"+dataFomart(data);
        //清空参数
        data = null;
    }
    //通过 script 标签的 src 属性 请求
    script.src = url;
    head.appendChild(script);
    window[call] = function(arg) {
        params.success(arg);
    }
    return;
}

//格式化请求参数
function dataFomart(data) {
    var strs = '';
    for (var vl in data) {
        strs += vl + '=' + data[vl] + '&';
    }
    console.log(strs);
    return strs.slice(0, -1);
}

if (type == "get") {
    url += '?' + dataFomart(data);
    data = null;
}
// ajax 
var xhr = new XMLHttpRequest();

xhr.open(type, url);
if (type == "post") {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.send(dataFomart(data));
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //解析为json 
        var str = JSON.parse(xhr.responseText);
        params.success(str);
    }
}

};

2 在html 中引用自定义ajax

<script src='ajax.js'></script>
<script type="text/javascript">
var btn = document.querySelector('.btn');

btn.onclick = function() {
    $.ajax({
        url: 'http://www.longtaoge.com/jsonp/demo.php',
        type: 'get',
        data: { name: '小明', age: 12 },
        dataType: 'jsonp',
        success: function(data) {
            console.log(data);
           // 处理返回数据 fillData(data);
        }
    });
}

3 服务器端返回数据

<?php 

   header("Content-type:text/json;charset=utf-8");
   //获取回调方法
   $cal=!empty($_GET['callback'])?$_GET['callback']:'';
   //获取相关参数
   $name=!empty($_REQUEST['name'])?$_REQUEST['name']:"";
   $age=!empty($_REQUEST['age'])?$_REQUEST['age']:"";
   //从文件中取出模似数据
   $va=file_get_contents("./data/data.json");
   $vaObj=json_decode($va);
   //TODO 处理数据
    if (empty($cal)) {
       // 参数
       echo  json_encode($vaObj);
     }else{
        // 跨域回调
      echo $cal.'('.json_encode($vaObj).')';
   }

2. CORS（Cross-origin resource sharing）

CORS是一个W3C标准，全称是”跨域资源共享” , cors 需要浏览器和服务器的支持,现在主流的浏览器均支持这一标准.
服务器端 需要对响应头进行相应的配置实现这一功能

举例说明:在网站 test.com 有一个向 www.longtaoge.com 发起的js简单请求

http://www.test.com/cors/cors.html 

<script type="text/javascript">
var xhr = new XMLHttpRequest;
xhr.open('get', 'http://www.longtaoge.com/cors/cors.php');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
        document.write(xhr.responseText);
    }
}
</script>

直接请求浏览器将提示以下错误信息

cors.html:1 XMLHttpRequest cannot load http://www.homework.com/cors/cors.php. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://www.test.com' is therefore not allowed access.

http://www.longtaoge.com/cors/cors.php

可以在响应头中设置 Access-Control-Allow-Origin 实现跨域请求

<?php 
  header('Access-Control-Allow-Origin:http://www.test.com'); //允许 www.test.com 的跨域请求
 //header('Access-Control-Allow-Origin:*');  //允许所有网站的跨域请求
  echo "来自 www.homework.com  的数据 ";

?>

再次访问

3. 配置apache反向代理实现浏览跨域

1 apache 配置

• 打开配置文件httpd.conf

• 开启 proxy_http_module 和 proxy_module 模块，将#号删除

       #LoadModule proxy_module modules/mod_proxy.so
       #LoadModule proxy_http_module modules/mod_proxy_http.so
  

• 代理详细配置

可以单独为某一个虚拟主机配置反向代理，这样不同的虚拟主机就可以被代理到不同的服务器了

• 开启辅配置，将#号删除

  #Include conf/extra/httpd-vhosts.conf

• 配置虚拟主机

  <VirtualHost *:80>
   ServerAdmin 61852263@qq.com
   DocumentRoot "E:/www/test"
   ServerName test.com
   #本服务器域名
   ServerAlias www.test.com 
   ErrorLog "logs/dummy-host.studyit.com-error.log"
   CustomLog "logs/dummy-host.studyit.com-access.log" common
  
  
   ProxyRequests Off
   # 访问/api 相当于访问   http://www.longtaoge.com:80
   ProxyPass /api http://www.longtaoge.com:80
  
   # 这样所有的请求就经过 /api 被代理到  http://www.longtaoge.com:80了
   # /api 也不是固定的，可以自行调整
  

2 html 访问接口

 <script type="text/javascript">
    // 通过服务器代理 相当于访问 http://www.longtaoge.com/jsonp/demo.php
     var url = '/api/jsonp/demo.php';
     var xhr = new XMLHttpRequest();
     xhr.open('get', url);
     xhr.send();
     xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //解析为json 
            var str = JSON.parse(xhr.responseText);
            console.log(str);
         }
     }
     </script>

3 服务器返回数据

<?php 
header("Content-type:text/json;charset=utf-8");
//模似数据
$va=file_get_contents("./data/data.json");
$vaObj=json_decode($va);
//返回输出
echo  json_encode($vaObj);