邳州做网站的公司,国内免费发布产品的平台,广州seo网站服务公司,杭州网站开发与设计项目场景#xff1a;
调用接口进行手机验证提示,项目需要调用其它域名的接口,导致前端提示跨域问题 问题描述
前端调用其他域名接口时报错提示: index.html#/StatisticalAnalysisOfVacancy:1 Access to XMLHttpRequest at http://xxxxx/CustomerService/template/examineMes…项目场景
调用接口进行手机验证提示,项目需要调用其它域名的接口,导致前端提示跨域问题 问题描述
前端调用其他域名接口时报错提示: index.html#/StatisticalAnalysisOfVacancy:1 Access to XMLHttpRequest at http://xxxxx/CustomerService/template/examineMessage from origin http://xxxxx has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 原因分析 在前端领域中跨域是指浏览器允许向服务器发送跨域请求从而克服Ajax只能同源使用的限制。 这个问题是随着AJAX的兴起Web 应用对跨域访问的需求就越来越多AJAX在进行跨域请求的时候受到浏览器安全限制。
浏览器出于安全的考虑引入了同源策略。这种策略会对页面上执行的js访问资源的时候进行限制比如不能直接通过js访问不同源之下的页面DOM结构同时在对不同源发送请求时也无法获取到服务器响应内容服务器会正常处理请求并返回响应内容但是返回的内容被浏览器拦截掉了。
什么是同源策略
同源策略/SOPSame origin policy是一种约定由Netscape公司1995年引入浏览器它是浏览器最核心也最基本的安全功能如果缺少了同源策略浏览器很容易受到XSS、CSFR等攻击。所谓同源是指协议域名端口三者相同即便两个不同的域名指向同一个ip地址也非同源。
同源策略将限制以下几种行为
Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 Js对象无法获得 常见的跨域场景 URL说明是否允许通信http://www.domain.com/a.js http://www.domain.com/b.js同一域名不同文件或路径允许http://www.domain.com:8000/a.js http://www.domain.com/b.js同一域名不同端口不允许http://www.domain.com/a.js https://www.domain.com/b.js同一域名不同协议不允许http://www.domain.com/a.js http://192.168.4.12/b.js域名和域名对应相同ip不允许http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js主域相同子域不同不允许http://www.domain1.com/a.js http://www.domain2.com/b.js不同域名不允许 解决方案 解决方案 jsonp跨域 通常为了减轻web服务器的负载把js、cssimg等静态资源分离到另一台独立域名的服务器上在html页面中再通过相应的标签从不同域名下加载静态资源而被浏览器允许基于此原理可以通过动态创建script再请求一个带参网址实现跨域通信。 前端实现代码 script typetext/javascript function onLogin(res){console.log(res);}
/script//引用文件的方式
script typetext/javascript srchttps://www.devpoint.com/login?userdevpointcallbackonLogin//AJAX以jquery.js
script typetext/javascript $.ajax({url:https://www.devpoint.com/login,type:get,dataType:jsonp, //请求方式为jsonp jsonpCallback:onLogin, //自定义回调函数名data:{}});
/script 服务端实现代码PHP: echo onLogin({result:success, user: doweb}) 局限仅限GET请求 document.domain iframe 跨域 实现原理两个页面通过js的document.domain强制设置为相同主域来达到同域的效果即相当于iframe中的页面为通信代理页面代理页面必须部署在与后端服务器同源站点下。 主页面假定访问路径为https://blog.devpoint.cn/login.html iframe idproxyIframe srchttps://api.devpoint.cn/proxy.html/iframe
script typetext/javascript document.domain devpoint.cn;const user devpoint;const elemIframe document.getElementById(proxyIframe);elemIframe.login(user,function(res){console.log(res);});
/script 代理页面https://api.devpoint.cn/proxy.html script typetext/javascript document.domain devpoint.cn;function ajax(data,callback){//此处实现与真正的后端通信}function login(user,callback){ajax(data,callback);}
/script 局限仅限主域名一致子域名不同的跨域。 location.hash iframe跨域 实现原理 a欲与b跨域通信通过中间页c来实现。 三个页面不同域之间利用iframe的location.hash传值相同域之间直接js访问来通信。 具体实现A域a.html - B域b.html - A域c.htmla与b不同域通过hash值单向通信b与c也不同域也只能单向通信但c与a同域所以c可通过parent.parent访问a页面所有对象。 a.htmlhttp://www.devpoint.cn/a.html iframe idiframe srchttp://www.devpoint.cn/b.html styledisplay:none;/iframe
script typetext/javascript var iframe document.getElementById(iframe); //向b.html传hash值 setTimeout(function() {iframe.src iframe.src #userdevpoint; }, 1000); // 开放给同域c.html的回调方法 function onCallback(res) { alert(data from c.html --- res); }
/script b.htmlhttp://www.doweb.me/b.html iframe idiframe srchttp://www.doweb.me/c.html styledisplay:none;/iframe
script typetext/javascriptvar iframe document.getElementById(iframe); //监听a.html传来的hash值再传给c.htmlwindow.onhashchange function () {iframe.src iframe.src location.hash; };
/script c.htmlhttp://www.devpoint.cn/c.html script typetext/javascript//监听b.html传来的hash值window.onhashchange function () {//再通过操作同域a.html的js回调将结果传回 window.parent.parent.onCallback(hello: location.hash.replace(#user, )); };
/script 局限繁琐且location.hash传递的值长度有限 postMessage跨域 postMessage是HTML5 XMLHttpRequest Level 2中的API且是为数不多可以跨域操作的window属性之一它可用于解决以下方面的问题 页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的iframe消息传递上面三个场景的跨域数据传递 实现原理postMessage(data,origin)方法接受两个参数 data html5规范支持任意基本类型或可复制的对象但部分浏览器只支持字符串所以传参时最好用JSON.stringify()序列化。origin 协议主机端口号也可以设置为*表示可以传递给任意窗口如果要指定和当前窗口同源的话设置为/。 CORS跨域 普通跨域请求服务端设置Access-Control-Allow-Origin即可前端无须设置 跨域请求要带cookie前后端都需要设置。 需注意的是由于同源策略的限制所读取的cookie为跨域请求接口所在域的cookie而非当前页。如果想实现当前页cookie的写入。 目前所有浏览器都支持该功能CORS也已经成为主流的跨域解决方案。在项目中的DEBUG功能的跨域请求就是使用这个方案。 前端设置需要在请求头中设置withCredentials属性 headers: {x-fdn-sign: apiSign,withCredentials: true
} 服务端设置 response.setHeader(Access-Control-Allow-Origin, *); // 若有端口需写全协议域名端口
response.setHeader(Access-Control-Allow-Credentials, true); 我个人是使用 jsonp跨域 解决的 $.ajax({url:htt.www:5060/CustomerService/template/examineMessage,data: {PhoneNumbers:applicantTel,state:auditstatus},type:post,dataType:jsonp,jsonpCallback:onLogin, //自定义回调函数名success:function (result) {console.log(修改变更,result)if(result.code200){table.reload(recordOfRepair1);}else{layer.msg(result.message)}}}); 后端也可以解决只需要在接口处加个注解即可
CrossOrigin
注意: Spring Framework 4.2 GA为CORS提供了第一类支持使您比通常的基于过滤器的解决方案更容易和更强大地配置它。所以springMVC的版本要在4.2或以上版本才支持CrossOrigin ;
或者也可参考这位博主的 9种常见的前端跨域解决方案详解_前端解决跨域问题_时清云的博客-CSDN博客
