彻底解决前端开发在前后端分离过程中的跨域问题

跨域?

就是在当前域名下去访问其他域名的地址，这就是跨域。

由于浏览器本身的同源机制，为了安全，不允许本域名下去访问其他域名的脚本。所以有了跨域问题，那怎么解决跨域问题呢？

加入herder   jsonp   代理

 

1.加入herder 

直接在服务器端声明，允许访问某个指定的域名，比如php在头部加上

1.1允许单个域名访问

指定某域名（http://client.runoob.com）跨域访问

header('Access-Control-Allow-Origin:http://client.runoob.com');

2.2允许多个域名访问

指定多个域名（http://client1.runoob.com、http://client2.runoob.com等）跨域访问，则只需在http://server.runoob.com/server.php文件头部添加如下代码：

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
    'http://client1.runoob.com',
    'http://client2.runoob.com'
);

if(in_array($origin, $allow_origin)){
    header('Access-Control-Allow-Origin:'.$origin);
}

2.3允许所有域名访问

允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码：

header('Access-Control-Allow-Origin:*');

这就是声明允许所有域名来访问，*就是代表所有域名，当然可以把*换为具体指定的域名比如http://localhost/test.php这样就可以访问到该域名。

 

2.反向代理

代理访问其实在实际应用中有很多场景，在跨域中应用的原理做法为：通过反向代理服务器监听同端口，同域名的访问，不同路径映射到不同的地址，比如，在nginx服务器中，监听同一个域名和端口，不同路径转发到客户端和服务器，把不同端口和域名的限制通过反向代理，来解决跨域的问题，案例如下：

server {
        listen       80;
        server_name  domain.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location /client { #访问客户端路径
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
        location /apis { #访问服务器路径
            rewrite  ^/apis/(.*)$ /$1 break;
            proxy_pass   http://localhost:82;
       }
}

 

3. jsonp 

jsonp是解决跨域问题的常用办法。在客户端发送ajax请求时，声明数据类型和jsonp这样就可以访问。同时在服务器端返回的时候要加上json jsonCallback这样也可以解决跨域问题。
php代码

echo $_GET['jsoncallback'] . "(".json_encode($row).")";

前端代码

    $.ajax({
        url:url,
        data:data,
        dataType:"jsonp",
        jsonp:"hello",
        jsonpCallback:"hello",
        type:"GET",
        success:function(result){
            console.log(result);

        },
        error:function(result){
            console.log(result);
        }
    });