卖文具的网站建设,网站风格什么意思,定做app需要多少钱,做网站现在好弄么文章目录1、什么是跨域2、解决跨域的几种方案2.1、JSONP 方式解决跨域2.2、CORS 方式解决跨域#xff08;常见#xff0c;通常仅需服务端修改即可#xff09;2.3、Nginx 反向代理解决跨域#xff08;推荐使用#xff0c;配置简单#xff09;2.4、WebSocket 解决跨域2.5、…
文章目录1、什么是跨域2、解决跨域的几种方案2.1、JSONP 方式解决跨域2.2、CORS 方式解决跨域常见通常仅需服务端修改即可2.3、Nginx 反向代理解决跨域推荐使用配置简单2.4、WebSocket 解决跨域2.5、PostMessage方式解决跨域HTML5中的XMLHttpRequest Level 2中的API1、什么是跨域 假如一个域名地址的为http://www.a.com:8080/scripts/jquery.js 它的构成如下
协议http://子域名www子域名a.com端口号8080请求资源地址scripts/jquery.js 跨域根本原因是由同源策略引起的。所谓同源是指域名协议端口相同当页面在执行一个脚本时会检查访问的资源是否同源如果非同源在请求数据的时候浏览器会在控制台报一个异常提示拒绝访问。注意跨域限制访问其实是浏览器的限制。理解这一点很重要
跨域访问的例子
请求跨域了那么请求到底发出去没有 跨域并不是请求发不出去请求能发出去服务端能收到请求并正常返回结果只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求为什么 Ajax 就不会?因为归根结底跨域是为了阻止用户读取到另一个域名下的内容Ajax 可以获取响应浏览器认为这不安全所以拦截了响应。但是表单并不会获取新的内容所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF因为请求毕竟是发出去了。
2、解决跨域的几种方案
互联网上存在很多解决跨域的方式如下图所示
以下介绍几种常见的解决跨域的办法其他想了解的可以自行在网上查阅。
2.1、JSONP 方式解决跨域
Jsonp 包含两部分回调函数和数据。 回调函数是当响应到来时要放在当前页面被调用的函数。 数据就是传入回调函数中的 json 数据也就是回调函数的参数了。
function handleResponse(response){console.log(The responsed data is: response.data);
}
var script document.createElement(script);
script.src http://www.baidu.com/json/?callbackhandleResponse;
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({data: zhe})*/
//原理如下
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({data: zhe}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成缺点 1安全问题(请求代码中可能存在安全隐患) 2要确定 jsonp 请求是否失败并不容易
2.2、CORS 方式解决跨域常见通常仅需服务端修改即可 CORS 全称是跨域资源共享Cross-origin resource sharing。CORS需要浏览器和服务器同时支持但是目前基本上浏览器都支持所以我们只要保证服务器端服务器实现了 CORS 接口就可以跨域通信。
实现方式在数据包的头部配置 Access-Control-Allow-Origin 字段以后,数据包发送给浏览器后浏览器就会根据这里配置的白名单 “放行” 允许白名单的服务器对应的网页来用 ajax 跨域访问 。
CORS 解决跨域问题就是在服务器端给响应添加头信息
Access-Control-Allow-Origin 允许请求的域
Access-Control-Allow-Methods 允许请求的方法
Access-Control-Allow-Headers 预检请求后告知发送请求需要有的头部
Access-Control-Allow-Credentials 表示是否允许发送cookie默认false
Access-Control-Max-Age 本次预检的有效期单位秒以下以 java 语言为例服务端 Filter 的设置如下
// 接收客户端发送的 origin 重要
// res.setHeader(Access-Control-Allow-Origin, *) // * 代表允许所有的地址跨域访问
// 如果是白名单可以定义跨域访问白名单
// String[] authOrigin {http://127.0.0.1:5500}
// if(authOrigin.includes(origin)) {
// // 只有白名单中的地址才可以跨域访问
// res.setHeader(Access-Control-Allow-Origin, origin)
// }
res.setHeader(Access-Control-Allow-Origin, origin)
//服务器支持的所有跨域请求的方法
res.setHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS, PUT, DELETE,UPDATE)
//允许跨域设置可以返回其他子段可以自定义字段
res.setHeader(Access-Control-Allow-Headers, Authorization, Content-Length, X-CSRF-Token, Token,session)
// 允许浏览器客户端可以解析的头部 重要
res.setHeader(Access-Control-Expose-Headers, Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers)
//设置缓存时间
res.setHeader(Access-Control-Max-Age, 172800)
//允许客户端传递校验信息比如 cookie (重要)
res.setHeader(Access-Control-Allow-Credentials, true) 其他请参考CORS 官网
2.3、Nginx 反向代理解决跨域推荐使用配置简单
原理因为跨域是浏览器限制的服务器请求服务器不受浏览器同源策略限制。 2.4、WebSocket 解决跨域
WebSocket 是一种浏览器的API它的目标是在一个单独的持久连接上提供全双工、双向通信。同源策略对 WebSocket 不适用 原理在 JS 创建了 WebSocket 之后会有一个 HTTP 请求发送到浏览器以发起连接。取得服务器响应后建立的连接会使用 HTTP 升级从 HTTP 协议交换为 WebSocket 协议。
var socket new WebSockt(ws://www.baidu.com);//http-ws; https-wss
socket.send(hello WebSockt);
socket.onmessage function(event){var data event.data;
}缺点 只能在支持 WebSocket 协议的服务器上才能正常工作。
2.5、PostMessage方式解决跨域HTML5中的XMLHttpRequest Level 2中的API
http://a.com/index.html中的代码
iframe idifr srcb.com/index.html/iframe
script typetext/javascript
window.onload function() {var ifr document.getElementById(ifr);var targetOrigin http://b.com; // 若写成http://b.com/c/proxy.html效果一样// 若写成http://c.com就不会执行postMessage了ifr.contentWindow.postMessage(I was there!, targetOrigin);
};
/scripthttp://b.com/index.html中的代码
script typetext/javascriptwindow.addEventListener(message, function(event){// 通过origin属性判断消息来源地址if (event.origin http://a.com) {alert(event.data); // 弹出I was there!alert(event.source); // 对a.com、index.html中window对象的引用// 但由于同源策略这里event.source不可以访问window对象}}, false);
/script
