No 'Access-Control-Allow-Origin' header is present on the requested resource', 跨域访问的解决方法
1. 当请求不在同一域名下的资源文件(ip地址+端口号)时,会报如下错误:
“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.”,翻译下,因为被请求的资源没有设置 ‘Access-Control-Allow-Origin’,所以 从’http://localhost:8080’ 发起的请求不被允许。
2. 原因:浏览器同源策略限制了此类请求。什么是同源策略?
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
常见跨域场景
1.)同一域名下的不同文件或路径,允许访问。
http://www.domain.com/a.js
http://www.domain.com/b.js
http://www.domain.com/lab/c.js
2.)同一域名下的不同端口, 不允许访问。
http://www.domain.com:8000/a.js
http://www.domain.com/b.js
3.)同一域名下的不同协议, 不允许访问。
http://www.domain.com/a.js
https://www.domain.com/b.js
4.)同一ip地址下的不同域名之间,不允许访问。
http://www.domain.com/a.js
http://192.168.4.12/b.js
5.) 不同域名之间不允许访问。
http://www.domain1.com/a.js
http://www.domain2.com/b.js
3.解决办法。
1.)针对上面的错误提示,我们肯定可以通过在被请求的资源文件中添加 'Access-Control-Allow-Origin’来解决跨域问题。
(1)如果被请求的是静态HTML文件,则需要只需要在被请求的HTML文件中加上一下标签。
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
(2)如果被请求的是java接口,则可以在响应头中加上:
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");
(3)如果被请求的是.net接口,则可以在响应头中加上:
Response.AddHeader("Access-Control-Allow-Origin", "*");
2.)另外一种方法就是从前端解决。前端可以通过jsonp请求的方式或者设置代理的方式解决。
(1)通过jsonp的方式。
跨域原理: 通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。
原生实现:
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
jquery实现:
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
crossDomain: true,
success: function(data) {},
data: {}
});
(2)通过请求代理的方式。
跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
以下提供java/.net跨域文件的源码,请自行发布使用。请求代理文件源码地址:https://github.com/muziye2013/CrossDomainAccessProxy
a. 如果是.NET开发环境,请将下载的“DotNet”源码发布为网站
并将网站的物理路径,指向源码DotNet地址:
修改index.html页面中被请求的资源,在浏览器中访问index.html页面进行测试。
var testUrl="http://172.17.0.130/***/query";//修改测试服务地址
b.如果是Java开发环境,请将下载的“Java”源码放在tomcat网站下的webapps目录下,
修改index.html页面中被请求的资源,启动tomcat,在浏览器中访问index.html页面进行测试。
以上,推荐使用第三种方式来进行配置,特别是对于前后端分离开发时,一劳永逸的解决跨域问题。
文章参考:https://segmentfault.com/a/1190000011145364
更多推荐
所有评论(0)