当前位置: 首页 > news >正文

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

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

这是个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,插件就不一定能帮你“修好”这个问题了。就想前面说过的,你不可能指望所有你网站的用户,都会安装这个插件。

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

相关文章:

  • 一位工作多年的测试人告诉你哪些抓包工具指的推荐~
  • Redux学习与使用
  • 计算机组成原理知识总结(九)并行组织与结构
  • 带内全双工水声通信系统自干扰抵消技术研究框架与思路
  • 关于在使用elementui的tabs组件进行切换组件时会闪屏的解决方案
  • 网站被劫持了怎么办?
  • 二、字符串 String
  • Python数据类型转换
  • Protobuf 和JSON 性能分析
  • DCA培训心得笔记(二)
  • TB-RK1808M0最新固件烧录和驱动更新
  • (附源码)ssm高校社团管理系统 毕业设计 234162
  • C语言被创造出来的基础是什么?它的主要结构是什么?
  • error: Unexpected console statement (no-console) 解决办法
  • 神经系统分类和组成图表,神经系统的组成概念图
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 【391天】每日项目总结系列128(2018.03.03)
  • Apache Zeppelin在Apache Trafodion上的可视化
  • ES学习笔记(12)--Symbol
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • Python连接Oracle
  • react 代码优化(一) ——事件处理
  • React的组件模式
  • SpringBoot 实战 (三) | 配置文件详解
  • uni-app项目数字滚动
  • Web标准制定过程
  • 闭包--闭包作用之保存(一)
  • 关于使用markdown的方法(引自CSDN教程)
  • 软件开发学习的5大技巧,你知道吗?
  • 深入浅出webpack学习(1)--核心概念
  • elasticsearch-head插件安装
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #pragam once 和 #ifndef 预编译头
  • (1)Android开发优化---------UI优化
  • (2.2w字)前端单元测试之Jest详解篇
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (一)Neo4j下载安装以及初次使用
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .bat批处理(三):变量声明、设置、拼接、截取
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .net core 源码_ASP.NET Core之Identity源码学习
  • .net framework 4.0中如何 输出 form 的name属性。
  • .NET Micro Framework 4.2 beta 源码探析
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .NET/C# 使窗口永不激活(No Activate 永不获得焦点)
  • @RequestMapping用法详解
  • [ C++ ] STL_list 使用及其模拟实现
  • [【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器