跨域了? 装个插件就够了!

浏览器为了安全引入了同源策略,这直接导致默认情况下前后端域名如果不同,那么则功能会受限。 随着前后端分离的发展,前端和后端职责的分离,前端会有专门的本地开发服务器(local dev server)用于本地开发。这个时候和后端接口联调时就很可能会遇到跨域安全问题。

这本身是浏览器的一种安全策略,但是却对前端开发造成了影响。如何解决呢?

之前我的解决方式是通过本地代理(node 或 nginx 等服务)解决。基本思路就是给请求响应头增加大概如下内容:

Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

后来我使用了更方便的工具: 浏览器扩展。之后跨域问题便可以一去不复返。

刚开始的时候用的是一个专门给请求加跨域头的插件 Allow CORS: Access-Control-Allow-Origin ,地址:https://chrome.google.com/web...

这个插件使用起来非常简单,只需要点击切换 on 和 off 的状态即可。 on 的时候会自动给请求头增加跨域功能,off 则相当于禁用了插件。

后来我发现这个插件有些头不会加上,比如 access-control-expose-headers 。

因此一个通用的给请求增加头信息的插件就有必要了。于是我选择了 requestly

美中不足是每个规则只能免费改一个头。不过好消息是你可以新建多个规则,每个规则改一个头就可以白嫖了。

地址:https://app.requestly.io

requestly 不仅仅可以增加跨域请求头,理论上可以对请求和响应做任意的修改。因此用来做 mock,统一加参数等等都是可以的。

基于此,使用浏览器扩展就可以彻底解决前端在本地开发时候遇到的跨域问题了。


脑洞前端
你不知道的前端
5.3k 声望
4.6k 粉丝
0 条评论
推荐阅读
**伯克利大学** 的计算机入门教程
import-local 是一个 NodeJS 端的工具,用于检测本地是否安装了某个包。如果你在开发一个 node 的 cli 应用,并且想要提高性能使用用户本地安装好的包,它就很适合你。

lucifer阅读 1k评论 5

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.6k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图
5.3k 声望
4.6k 粉丝
宣传栏