当前位置:首页 > 技术分析 > 正文内容

Go 系列讲座:Gin+Jwt RestFul Api 后端一战到底 4: Cors 跨域



CORS 跨域简介


浏览器同源策略 (跨域是浏览器的限制,抓包工具等可以拿到数据) 浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉

那么什么才算同域呢?


同域 (不跨域)

  • 协议相同、
  • 域名相同、
  • 端口相同

全部相同

才算同一域下,三个条件有一个不一致,都不算同域,既跨域; 举个例子


aaa.yourcompany.com:8892 与 bbb.yourcompany.com:9902  跨域了 协议,端口号不同  默认不允许访问
aaa.yourcompany.com:8892 与 aaa.yourcompany.com:9902  跨域了 端口号不同  默认不允许访问
aaa.yourcompany.com:7788 与 aaa.yourcompany.com 完全相同没有跨域, 允许通过

在浏览器中前端 访问后端API 的时候经常会出现当前页面的URL 与后端 API 在协议,域名,和端口号不同的情况


跨域

只要协议, 域名, 端口,任意一个不一样.都算跨域.

跨域有什么问题?

跨了浏览器就拦截不允许通讯

怎么解决跨域

gin 框架中间件

    router := gin.New()
	router.Use(cors.New(cors.Config{
		AllowMethods: []string{"OPTIONS", "POST", "GET"},
		AllowHeaders: []string{"Origin", "X-Requested-With",
			"Content-Type", "Accept", "YOUR-CUSTOM-TOKEN"},
		AllowCredentials: true,
		AllowOriginFunc: func(origin string) bool {
			return true
		},
	}))cors

服务器解决了,客户端怎么调用?

客户端调用到时候 Http 头加上 "Content-Type", "Accept", "YOUR-CUSTOM-TOKEN" 就可以跨域通讯了?

什么时候用跨域啊?

一般是将api.xxx.com 然后跨域配置中间件. 在客户端加上http头. 完美.

vue , reac 一般可有配置 target: proxy 来实现api域名到跨域配置.

还有什么?

umi.js, next.js等框架.怎么配置? 一个小问题,留着你去探索.

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3518.html

标签: vue跨域
分享给朋友:

“Go 系列讲座:Gin+Jwt RestFul Api 后端一战到底 4: Cors 跨域” 的相关文章

Gitlab概览

Gitlab是开源的基于Git的仓库管理系统,也可以管理软件开发的整个生命周期,是项目管理和代码托管平台,支撑着整个DevOps的生命周期。Gitlab很容易选为GitHub,作为公司私有库管理的工具。我们可以用Gitlab Workflow来协同整个团队的软件开发管理过程。软件开发阶段Gitlab...

学无止境:Git 如何优雅地回退代码

来源:https://zhenbianshu.github.io前言从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码、提交、合并等,更复杂的操作没有使用过,看过的教程也逐渐淡忘了,有些对不起 L...

GitLab-合并请求

描述合并请求可用于在您对项目进行的其他人员之间交换代码,并轻松与他们讨论更改。合并请求的步骤步骤1-在创建新的合并请求之前,GitLab中应该有一个创建的分支。您可以参考本章来创建分支-步骤2-登录到您的GitLab帐户,然后转到“ 项目”部分下的项目 -步骤3-单击“ 合并请求”选项卡,然后单击“...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...

vue v-html动态生成的html怎么加样式/事件

1、动态生成的html,样式不生效//html 布局 <view v-html="html"> {{html}} </view> //动态生成的元素 <view class="btngo" @tap="handleLink...