在前后端分离的开发模式广泛应用的过程中,我们不得不面对跨域这个问题,而为什么会出现跨域呢?什么情况下称为跨域呢?
跨域源自浏览器的同源策略,同源策略又分为了两种
1. ajax——协议+主机+端口,其中一个与之前页面所在的不一样,就称为ajax跨域了
2. iframe——iframeA到iframeB过程中操作共享数据,比如访问window.name会因为跨域而报错
因此,当前后端分离之后,前端的页面可能处于8080端口,而后端服务器可能处于9000端口上,那么,在前端页面向服务器发起请求时,便触发了跨域问题。
有什么办法可以解决跨域问题呢?方法有四种。
一、jsonp
原理:使用script标签,加载js代码并执行,需要在js中声明一个函数,用来作为js代码回来后的调用,参数是后台数据
请求方式:GET方式
特点:没有兼容性问题,但前后端都需要书写代码
写在html文件——编写全局函数+script标签+传递函数名
1.script标签的创建及加载 var script = document.createElement('script')
2.服务器返回的数据 需要在函数中执行
3. 挂载一个全局函数
var callbackName = 'callback_' + Date.now(); //起个名字
window[callbackName] = function (data) { //全局函数
//....
}
4.把这个函数名传递给服务器
script.src = 'http://localhost:8889/jsonp?callback='+callbackName;//请求后台端口
5.将标签插入body中
document.body.appendChild(script);
服务器——响应“函数名('数据')”的字符串,让script标签执行
1. 从请求url参数中获取callback对应的值 var cb = url.parse(req.url, true).query.callback
2. 拼接“函数名(数据)”的字符串返回给字符串
//data为对象的话使用JSON.stringify()转换后再传输
res.end(`${cb}(${data})`);
二、CORS(跨域资源共享)
安全性不好
至少IE10支持
服务器为响应头设置'Accesss-Control-Allow-Origin'等:
Access-Control-Allow-Origin: 'http://xxx.com' //允许哪个域在跨域的时候访问,*代表所有
Access-Control-Allow-Credentials: true //是否允许携带证书。cookie跨域写回给浏览器,默认不会自动携带,需要客户端设置携带并且服务器允许携带cookie才能完成跨域,同时客户端也要设置withCredentials:true + Origin不能是*
Access-Control-Allow-Methods: 'GET,POST,PUT,DELETE'; // 默认允许get/post
Access-Control-Allow-Headers:'xxx'; // 允许你自己加的头来通信
*option(预检请求)——浏览器向服务器发起的OPTIONS预检请求,如果服务器不满足条件,则拒绝ajax请求。触发点:1.非简单请求方式(get/post之外)2. 加入了自定义的头;3. 当content-type是非键值对application/json;
三、代理
原理:通过node服务器加载本页面,再通过node服务器访问其它服务器
proxy原理:服务器本身不受所谓浏览器同源策略的影响
下载依赖包:npm i request -S
前端:请求node服务器的接口
服务器:
http.createServer((req, res) => {
//1. 创建一个客户端对象,执行url
var x = request('http://api.douban.com/xxx/xx/x');
//2. 把浏览器原本的请求信息通过管道流到新的请求对象中,并请求
req.pipe(x); // req => x
//3. 把这次请求的响应通过管道流到页面的相应中
x.pipe(res); // x => res
})
四、使用工具
nginx代理
目录命令行启动:start nginx //启动主体进程-》工作进程
配置文件:nginx.conf
server {
listen: 端口;
location: 页面配置;
}
location /apis {
//代理动作设置
}
一些基本命令:
*关闭代理服务器:nginx -s stop
*重新加载:nginx -s reload
前端页面请求接口'/apis/接口' 与后台约定标记需要代理的接口