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

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

ruisui881周前 (04-22)技术分析13



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

79.idea中git合并分支操作分享

文章目录前言1.fetch的操作2.合并最新代码到当前的开发分支3.解决冲突4.分支合并:5.完成代码合并总结前言git的操作在日产的工作中也非常重要,团队化的代码管理,每次如果代码被别人覆盖或者自己的代码不能提交到服务器那是灾难性的结果,本篇进行一篇分享来总结下idea中git的操作帮助java开...

Java教程:gitlab-使用入门

1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作GitLab简介GitLab环境搭建GitLab基本使用(组、权限、用户、项目)2 GitLab简介GitLab是整个DevOps生命周期...

15款测试html5响应式的在线工具

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面15款工具可以方便测试你的html5响应式效果。Responsinatorhttp://www.re...

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

three.js cannon.js物理引擎之齿轮动画

今天继续说一说cannon.js物理引擎,并用之前已经学习过的知识实现一个小动画,知识点包括ConvexPolyhedron多边形、Shape几何体、Body刚体、HingeConstraint铰链约束等等知识。因为我之前用纯three.js 的THREEBSP实现过一个静态的齿轮,现在就想配合ca...