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

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

ruisui882个月前 (04-22)技术分析37



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 跨域” 的相关文章

vue组件间的九种通信方式

前言Vue组件实例间的作用域是相互独立的,而通常一个页面是由很多个组件构成,这些组件可能又嵌套了组件,形成了一个关系网图,它们的关系可能是像下图中一样,大致分为两种使用场景,父子组件间通信和非父子组件间通信,父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法,针对不同的通信需求...

内存问题探微

这篇文章是我在公司 TechDay 上分享的内容的文字实录版,本来不想写这么一篇冗长的文章,因为有不少的同学问是否能写一篇相关的文字版,本来没有的也就有了。说起来这是我第二次在 TechDay 上做的分享,四年前第一届 TechDay 不知天高地厚,上去讲了一个《MySQL 最佳实践》,现在想起来那...

你感动了吗?佳能超规格镜头 RF 24-105mm F2.8深度测评

如果要你选一支用作多题材创作的挂机镜头,那我相信很多人会选择24-105mm这个焦段的镜头。作为一支可以实现从广角到长焦的变焦镜头,24-105mm有着丰富的焦段选择。只是基于镜头体积以及光学结构上的限制,此前的24-105mm镜头只能恒定在F4的光圈。而佳能打破了这一限制,将实用焦段和恒定光圈完美...

别让“跑焦”毁所有!仅需这一项设置,即可显著改善镜头对焦精度

我常常会收到一些摄影爱好者的私信,也一直在努力的帮助大家解决更多摄影中常见问题。在我收到的所有问题中。有一个问题是最麻烦的,那就是“为什么我的图像看起来模糊?”。这个问题几乎每个人都遇到过,究其原因可以说是多种多样相对复杂。起初我一直认为是对焦问题所导致,也就有了我之前所写的“后按对焦”以及“对焦模...

Vue学习笔记之动态路由的参数传递应用及技巧

路由的参数传递:①通过params的类型· 配置路由格式:/router/:id· 传递的方式:在path后面跟上对应的值· 传递后形成的路径:/router/list,/router/profile这个就是前两篇中提到的"动态路由"中有应用过这个方法:②通过query的类型(对象方...

深入理解vue-router原理

说到vue-router就表明他只适合于vue和vue是强绑定的关系;不适合其他框架;现在我们模仿实现一个VueRouter;1.要使页面刷新;借助vue本身的响应式原理;import Home from "./views/Home"; import About from "...