跨域的几种解决方案

关于跨域

JSONP

这个可能是好多人想到的第一解决方案了但是其实这个也有局限性

• 需要前后端配合
• 你可以实现跨域，别人也可以调用你的接口了

具体实现:
服务器端:
http://127.0.0.1:8081/test.php

<?php
 echo 'handler(' . json_encode(array('a' => 'b')) . ')'; //简单输出handler({a:b}）

客户端：

一、动态加载script标签方式

    function setScript() {
        var script = document.createElement('script');
        script.setAttribute('src', 'http://127.0.0.1:8081/test.php?callback=handler');//callback指定回调函数名称
        document.querySelector("head").appendChild(script);
    }
setScript();//动态加载script
   //  处理函数
    function handler(data) {
        alert(data.a);
    }

二 、利用jQuery的ajax

   $.ajax({
            async: true,
            url: "http://127.0.0.1:8081/test.php",
            type: "GET",
            dataType: "jsonp", // 设置为JSONP方式
            jsonp: 'callback', //覆盖默认的 jsonp 回调参数名 callback
            jsonpCallback: 'handler', //回调函数名
            data: {
                q: "javascript",
                count: 1
            },
            success: function (response, status, xhr) {
                console.log(response);
            }
        });


        function handler(data) {
        alert(data.a);
        }

Nginx反向代理

利用Nginx反向代理把跨域的网址变成自己可以访问的地址，但是存在的问题在于

• 请求安全性，可能请求到恶意代码
• Nginx的设置设计到运维人员的设置，并非开发人员控制的

具体实现：

      location /getApi { 
            rewrite  ^/getApi/(.*)$ /$1 break;
            proxy_pass   http://127.0.0.1:8081;
      }

利用Chrome插件

在Chrome中利用沙盒可以进行跨域访问
具体实现
*，打开Google应用商店https://chrome.google.com/webstore/category/extensions?utm_source=chrome-ntp-icon
搜索CROS下载即可

后端开放访问

具体实现

header("Access-Control-Allow-Origin: http://XXXXXXXX.com ");