跨域解决方案

2019-02-24 本文已影响129人夜半暖人心

跨域解决方案:

1.为什么会有跨域问题？

这是由于浏览器的同源策略，限制了不同源的资源进行交互(不允许用AJAX（XMLHttpRequest）访问跨域的资源)，是一种隔离潜在恶意文件的重要安全机制.
同源和跨域的概念

同源	跨域
协议头、域名、端口全部一样就叫同源	协议头、域名、端口有一个不一样就叫跨域

划重点:
浏览器只是简单的看地址栏里的协议头、域名、端口是否一致，所以127.0.0.1 用ajax来访问 localhost也叫跨域.

2.可以发送跨域请求的方式

方式	局限
a标签	访问新网站，跟原网站网站无关
img标签	把响应体当图片解析
link标签	会把响应体当CSS来解析
script标签	可以发跨域请求，也可以拿到响应体

3.AJAX跨域问题

示例代码:

var xhr = new XMLHttpRequest();
//默认本地127.0.0.1访问，下面这个会报跨域的错误
xhr.open('get','http://api.douban.com/v2/movie/top250');
xhr.send();
xhr.onload = function(){
    console.log(xhr.responseText);
}

//报错信息如下:缺少响应头设置
//Access to XMLHttpRequest at 'http://api.douban.com/v2/movie/top250' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

4.跨域解决:开发阶段解决方案(本地测试):

(1)方案一:Chrome浏览器关闭跨域限制
原理:
跨域是浏览器的限制，可以通过设置关闭这个限制

步骤	设置
1	打开Chrome文件所在位置
2	右键Chrome程序创建快捷方式，重新命名，如Chrome_debug
3	右键点击Chrome_debug，打开属性，在目标(T)原本的内容+空格+如下后缀指令
4	复制文件绝对路径到浏览器运行，没有跨域问题

注意:
1.后缀代码: --disable-web-security --user-data-dir=C:\MyChromeDevUserData
2.Chrome浏览器设置允许跨域仅用于本地测试，上线让后端一定要开启跨域.
3.最后跟的路径C:\MyChromeDevUserData，是支持跨域的Chrome保存用户信息的位置，可以修改.
开启支持跨域之后,Chrome为了安全，会为这个快捷方式分配一个独立的保存空间，与原本不支持跨域的Chrome分开.

(2)方案二:vue处理跨域(用vue开发的时候):

步骤	设置
1	脚手架开启一个服务器:http://localhost:8080/index
2	http-proxy-middleware 配置把接口地址转发到服务器地址

5.跨域解决:上线解决方案

(1)方案一:JSONP
原理:
用script标签的src属性去访问跨域接口，服务器代码中，先接收你提交的函数名，然后在响应体里，返回一个调用这个函数的JS语法，并将JSON数据转换成对象当参数
示例代码:

<script>
        function test(obj){

            console.log(obj);
        }
</script>
<script src="http://api.douban.com/v2/movie/top250?callback=test"></script>

划重点:
Ⅰ.如果支持JSONP的接口，需要你传入一个函数，键叫callback.
Ⅱ.能不能用JSONP要看服务器接口支不支持，那我们怎么知道支持不支持？就是看文档，没文档就试一下就知道.
Ⅲ.优点:兼容性极好，只要支持script标签就行
Ⅳ.缺点:只能发get请求，数据大小有限制

(2)方案二:CORS
原理:
服务器告诉浏览器，我这个接口所有网站都可以访问，由后端来设置!
示例代码:

//PHP接口地址文件设置
<?php 

    //告诉浏览器：我这个接口所有网站都可以访问
    header('Access-Control-Allow-Origin:*');

    //也可以指定某个域名才能访问
    // header('Access-Control-Allow-Origin:http://127.0.0.1');

    echo 'ok';

(3)方案三:利用服务器当跳板去访问接口
原理:
跨域只是浏览器的限制，但是我们自己的服务器可以去访问别人的接口，我们访问自己服务器，自己服务器再去访问接口，然后返回的数据再返回给浏览器

本文同步发表在我的个人博客：https://www.lubaojun.com/

跨域解决方案