关于解决前后端跨域问题(No Access-Control-Allow-Origin header is present on the requested resource)的方法

问题描述:

        常见跨域场景
                1.)同一域名下的不同文件或路径,允许访问。
                        http://www.domain.com/a.css
                        http://www.domain.com/b.css
                        http://www.domain.com/lab/c.css
                2.)同一域名下的不同端口, 不允许访问。
                        http://www.domain.com:8000/a.css
                        http://www.domain.com/b.css
                3.)同一域名下的不同协议, 不允许访问。
                        http://www.domain.com/a.css
                        https://www.domain.com/b.css
                4.)同一ip地址下的不同域名之间,不允许访问。
                        http://www.domain.com/a.css
                        http://192.167.4.17/b.css
                5.) 不同域名之间不允许访问。
                        http://www.domain1.com/a.css
                        http://www.domain2.com/b.css

        报错:No Access-Control-Allow-Origin header is present on the requested resource

        原因:不能请求不在同一域名下的资源文件(IP地址+端口号),因为浏览器的同源策略限制了此类请求。

        什么是同源策略?

        同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它 是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
        同源策略限制以下几种行为:
                1.) Cookie、LocalStorage 和 IndexDB 无法读取
                2.) DOM 和 Js对象无法获得
                3.) AJAX 请求不能发送

解决方法:

一、如果是Springboot项目

        在controller上加@CrossOrigin即可解决:

二、如果不是Springboot项目

        1、在 后端通过在被请求的资源文件中添加 'Access-Control-Allow-Origin’来解决跨域问题。        

                (1)如果被请求的是java接口,则可以在响应头中加上:

                        response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
                (2)如果被请求的是静态HTML文件,则需要只需要在被请求的HTML文件中加上一下标签。

                        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
                (3)如果被请求的是.net接口,则可以在响应头中加上:

                        Response.AddHeader("Access-Control-Allow-Origin", "*");

        2、在前端通过jsonp请求的方式或者设置代理的方式解决。

                (1)通过jsonp的方式。
                        跨域原理: 通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。

                 (2)通过请求代理的方式。
                        跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
以下提供java/.net跨域文件的源码,请自行发布使用。请求代理文件源码地址:https://github.com/muziye2013/CrossDomainAccessProxy
                        a.如果是.NET开发环境,请将下载的“DotNet”源码发布为网站,并将网站的物理路径,指向源码DotNet地址,修改index.html页面中被请求的资源,在浏览器中访问index.html页面进行测试。

                        b.如果是Java开发环境,请将下载的“Java”源码放在tomcat网站下的webapps目录下,修改index.html页面中被请求的资源,启动tomcat,在浏览器中访问index.html页面进行测试。

                        

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值