跨域访问错误的一种解决方法

今天有个线上的接口出现了跨域访问的错误:

这是个post请求,完整的访问地址是: 

https://**.**.com//cooperation/api/promote/course/reportPhone

看到跨域访问,脑子里瞬间是各种高大上的“火箭”,但是本次的解决方法务必简单,就是前端发的这个请求里在.com后面多了一个“/”。也就是这样就行了:

https://**.**.com/cooperation/api/promote/course/reportPhone

为什么多了一个斜杠会出现跨域访问的错误,一直没搞清楚。之前也遇到过一次跨域的问题,当时的解决方法是在SpringBoot工程里增加如下的配置Bean信息:

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

当时就解决了跨域的问题,但是跨域的其他解决方法和原理还是值得讨论一下的。

这里转载了一篇翻译的文章,翻译了部分重要的部分。原文地址

第一种方法:安装一个Allow-Control-Allow-Origin插件

最简单粗暴的解决方法就是安装一个插件:moesif CORS extension。打开链接,安装好插件,在你的浏览器中启用插件(插件图标变为了"on")。

根据原文的说法,刷新页面就可以正常访问API了。但是这种我测试都没测,因为接口是前端的H5调的,不可能让人家都安装这么一个插件。而且这不过这种方法只是自我欺骗罢了。插件是解决了问题,但这只在你自己的机器上起作用。本地开发调试时,插件确实能帮你直接跳过这个问题。

但是你的页面应用总要发布,你的用户并不一定会安装这个插件。因此这个方法并不太好。。。

当然,我们有更好的办法。不过在看这些方法之前,我们先来看以下几个问题:

首先,CORS错误为什么会发生

这个错误起源于一个浏览器中的安全机制:同源策略(same-origin policy)

这个安全机制能够防止一种非常常见的网络攻击:跨站请求伪造(Cross-site request forgery),通常都是利用浏览器中存储的cookie来伪造。

每当浏览器对一个域发出HTTP请求,都会带上这个域所属的cookie。这对认证或维持session等功能非常有用。比如,当你访问facebook-clone.com的时候,你的浏览器就会存储一个于这个域相关会话的cookie:

Access-Control-Allow-Origin: *

浏览器接收到该响应后,会把前端应用的域和服务器返回的Access-Control-Allow-Origin值比较,如果比较不匹配,那么此次访问就被红灯了,并且会返回一个CORS错误的提示。

那么Allow-Control-Allow-Origin插件修复这个问题了吗

当然是没有,插件仅仅是关闭了浏览器的同源策略检查而已。插件会在每次请求的response中加入一个
Access-Control-Allow-Origin: *
的head罢了,以此来欺骗浏览器仿佛服务器真的允许所有的访问。

搞清楚了原因,我们知道我们不能掩耳盗铃。也许你知道,服务端会对你的线上页面放行,所以你在本地开发时用插件跳过检查。但如果你要使用其他的API,插件就不一定能帮你“修好”这个问题了。就想前面说过的,你不可能指望所有你网站的用户,都会安装这个插件。

除此之外 ,还可以通过代理等方式进行,但是这个在普通的工程里代价太大,一般还是通过变成语言等彻底解决掉比较好。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纵横千里,捭阖四方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值