在前后端分离的开发模式广泛应用的过程中，我们不得不面对跨域这个问题，而为什么会出现跨域呢？什么情况下称为跨域呢？
跨域源自浏览器的同源策略，同源策略又分为了两种
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/接口' 与后台约定标记需要代理的接口
网友评论