跨域解决方案:
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/
网友评论