三门峡网站建设,苏州旅游网站设计,邵阳建设网站公司,株洲网页设计1、什么是跨域 【】跨域是一种浏览器同源安全策略#xff0c;也即浏览器单方面限制脚本的跨域访问。很多人可能误认为资源跨域时无法请求#xff0c;实质上请求是可以正常发起的#xff08;指通常情况下#xff0c;部分浏览器存在部分特例#xff09;#xff0c;后端也可… 1、什么是跨域 【】跨域是一种浏览器同源安全策略也即浏览器单方面限制脚本的跨域访问。很多人可能误认为资源跨域时无法请求实质上请求是可以正常发起的指通常情况下部分浏览器存在部分特例后端也可能正常进行了处理只是在返回时被浏览器所拦截
【】跨域都是在讨论浏览器行为包括各种webview容器其中犹以 XmlHttpRequest 为主。正是由于javascript跑在浏览器之上所以ajax的跨域成了痛点 2、什么是同源策略 【】同源策略是一种约定是浏览器最核心也最基本的安全功能如果缺少了同源策略浏览器很容易受到XSS、CSRF等攻击。所谓同源是指协议域名端口三者相同即便两个不同的域名指向同一个ip地址也非同源
【】同源策略限制以下几种行为
Cookie、LocalStorage 和 IndexDB 无法读取DOM和JS对象无法获得AJAX 请求不能发送 3、JSONP 跨域 【】jsonp的原理就是利用script标签没有跨域限制通过script标签src属性发送带有callback参数的GET请求服务端将接口返回数据拼凑到callback函数中返回给浏览器浏览器解析执行从而前端拿到callback函数返回的数据。
【】缺点是只能发送 get 一种请求
【】原生 js 实现 scriptvar script document.createElement(script);script.type text/javascript;// 传参一个回调函数名给后端方便后端返回时执行这个在前端定义的回调函数script.src http://www.domain2.com:8080/login?useradmincallbackhandleCallback;document.head.appendChild(script);// 回调执行函数function handleCallback(res) {alert(JSON.stringify(res));}/script【】服务端返回如下返回时即执行全局函数
handleCallback({success: true, user: admin})【】Vue axios 实现
this.$http axios;
this.$http.jsonp(http://www.domain2.com:8080/login, {params: {},jsonp: handleCallback
}).then((res) {console.log(res);
})4、跨域资源共享CORS 【】允许浏览器向跨域服务器发出XMLHttpRequest请求从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持
【】浏览器将CORS跨域请求分为简单请求和非简单请求只要同时满足以下两个条件就是简单请求否则为非简单请求
使用方法post、get、head请求的header是Accept、Accept-Language、Content-Language、Content-Type
【】对于简单请求浏览器直接发出CORS请求在请求头信息中增加一个 Origin 字段用来说明请求来自哪个域服务器根据这个值决定是否同意这次请求
【】非简单请求的CORS请求会在正式通信之前增加一次HTTP查询请求称为预检请求。预检请求用的请求方法是OPTIONS表示这个请求是用来询问的
【】原生 ajax
var xhr new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials true;xhr.open(post, http://www.domain2.com:8080/login, true);
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.send(useradmin);xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {alert(xhr.responseText);}
};5、nginx代理跨域 【】NGINX 反向代理 6、nodejs中间件代理跨域 【】node中间件实现跨域代理原理大致与nginx相同都是通过启一个代理服务器实现数据的转发
【】vue框架的跨域node vue webpack webpack-dev-server搭建的项目跨域请求接口直接修改webpack.config.js配置。开发环境下vue渲染服务和接口代理服务都是webpack-dev-server同一个所以页面与代理接口之间不再跨域
【】webpack.config.js部分配置
module.exports {entry: {},module: {},...devServer: {historyApiFallback: true,proxy: [{context: /login,target: http://www.domain2.com:8080, // 代理跨域目标接口changeOrigin: true,secure: false, // 当代理某些https服务报错时用cookieDomainRewrite: www.domain1.com // 可以为false表示不修改}],noInfo: true}
}7、WebSocket协议跨域 【】WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信同时允许跨域通讯是server push技术的一种很好的实现。
【】前端代码
divuser inputinput typetext/div
script srchttps://cdn.bootcss.com/socket.io/2.2.0/socket.io.js/script
script
var socket io(http://www.domain2.com:8080);// 连接成功处理
socket.on(connect, function() {// 监听服务端消息socket.on(message, function(msg) {console.log(data from server: --- msg); });// 监听服务端关闭socket.on(disconnect, function() { console.log(Server socket has closed.); });
});document.getElementsByTagName(input)[0].onblur function() {socket.send(this.value);
};
/script【】Nodejs socket后台
var http require(http);
var socket require(socket.io);// 启http服务
var server http.createServer(function(req, res) {res.writeHead(200, {Content-type: text/html});res.end();
});server.listen(8080);
console.log(Server is running at port 8080...);// 监听socket连接
socket.listen(server).on(connection, function(client) {// 接收信息client.on(message, function(msg) {client.send(hello msg);console.log(data from client: --- msg);});// 断开处理client.on(disconnect, function() {console.log(Client socket has closed.); });
});8、小结 【】jsonp只支持get请求支持老的IE浏览器适合加载不同域名的js、cssimg等静态资源CORS支持所有类型的HTTP请求但浏览器IE10以下不支持适合做ajax各种跨域请求Nginx代理跨域和nodejs中间件跨域原理都相似都是搭建一个服务器直接在服务器端请求HTTP接口这适合前后端分离的前端项目调后端接口
