关于跨域请求的二三事
在前后端分离开发时跨域经常是一个不可回避的问题,这里介绍一个比较简单的办法,前端 vue.js
,后端 go
首先要区分简单请求和复杂请求
这里阮一峰有详细讲解过一个: 跨域资源共享 CORS 详解
如果你有一种太长不看的想法,就听我给你简单说一下:
- 简单路由: 指的就是你平时表单提交,ajax 提交,使用
GET,POST,HEAD
,http 头信息里面没有杂七杂八
的东西的请求
- 复杂请求: 就是除了简单请求之外的请求,比如你在 http 头里有自定义的字段,或者你使用像
DELETE,PATCH
这
样的方法
你会发现复杂请求最明显的变化就是浏览器每次去请求接口的时候会发送两次,这里第一次发送的必定是一个请求方法为OPTIONS
的,第二个才是你写的方法,我截图里的就是POST
, 第二张截图之所以被判定为复杂请求就是因为我加了一个X-TOKEN
这个
header,而如果第一次的OPTIONS
方法的请求如果失败了也就不会发送第二条信息了,至于为什么,我只能说这是规定
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
------HTTP访问控制(CORS)
对于简单请求和复杂请求的处理(后端)
既然叫简单请求处理起来也很简单,下面已经列出代码, 关键就是设置Access-Control-Allow
这一些参数就行,
复杂请求就是添加一个针对OPTIONS
的处理方式,通常情况返回一个空字符串就行至于跨域验证之类的就是八仙过海各显神通了
各家有个家的处理方法
package mainimport ("flag""fmt""net""net/http"
)type httpServer struct {
}func (s *httpServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {// Stop here if its Preflighted OPTIONS requestif origin := r.Header.Get("Origin"); origin != "" {w.Header().Set("Access-Control-Allow-Origin", "*") // 限制请求方的域 * 就是不限制w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE") // 限制请求方式w.Header().Set("Access-Control-Allow-Headers","Action, Module") //有使用自定义头 需要这个,Action, Module是例子w.Header().Set("Access-Control-Allow-Headers", "Content-Type,Authorization,X-Token") //允许的header的类型}// if r.Method == "OPTIONS" { // 针对复杂请求时做出的处理// return// }w.Write([]byte("hello"))
}func main() {addr := flag.String("http-address", "", "")flag.Parse()var h httpServerhttpListener, err := net.Listen("tcp", *addr)server := http.Server{Handler: &h,}server.Serve(httpListener)fmt.Println("finish ", err)
}
博客原文
关于跨域请求的二三事相关推荐
- ajax 跨域请求api_【.NET Core 3.0】框架之十二 || 跨域 与 Proxy
本文有配套视频: https://www.bilibili.com/video/av58096866/?p=8 一.为什么会出现跨域的问题 跨域问题由来已久,主要是来源于浏览器的"同源策略& ...
- 第114天:Ajax跨域请求解决方法(二)
一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子 ...
- AJAX(XMLHttpRequest)进行跨域请求方法详解(二)
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求 预检请求首先需要向另外一个域名的资源发送一个 HT ...
- js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
- Nginx配置跨域请求 Access-Control-Allow-Origin *
Nginx配置跨域请求 Access-Control-Allow-Origin * 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is p ...
- fetch 跨域请求
CORS cors是"Cross-Origin Resource Sharing"的简称,是实现跨域的一种方式,相对于其他跨域方式,比较灵活,而且不限制发请求使用的method,以 ...
- nginx 允许跨域_细谈跨域请求的桥梁
何谓跨域?这是浏览器本身特有的同源策略.同源,是指请求的发送方和请求接收方必须在协议.域名和端口上保持高度一致,否则,就会出现请求成功,但无法成功拿到响应结果的现象.但实际开发中,各种复杂业务的交织难 ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- corspost请求失败_vue项目CORS跨域请求500错误,post请求变options请求
vue项目CORS跨域请求500,post请求变options请求,到底是什么情况. 提示:以下内容是一个非专业开发的我对跨域的理解,并不10分准确. 一.先介绍为什么明明发送的是Post请求,为什么 ...
最新文章
- 行人检测--What Can Help Pedestrian Detection?
- mysql 1115_从ADS1115 Python向MySQL插入数据
- 如果提高声音测距的分辨率?
- python正则表达式使用实例_正则表达式的基础知识,以及Python爬虫中的使用方法...
- 2016级算法第六次上机-A.Bamboo之寻找小金刚
- jq之slideup()
- 高中技校学计算机,我没考上高中,英语数学极差,想上技校学计算机专业,玩代码的那种,有前途吗?...
- 这真不是网友P的图?雷军微博曝光小米9 SE真机图 彩虹小米有点炫酷
- SqlServer分区表概述(转载)
- Linux系统重要日志文件
- MySQL 源码下载教程
- 内网使用Maven本地仓库环境
- 面对面的办公室——纪念艾伦•图灵百年诞辰
- Busting Frame Busting
- Unable to find instance for XXXX
- 威联通建立文件服务器的方法,如何管理你的威联通nas文件?这四款神应用让你效率up!up!...
- RSS订阅微信公众号初探-feed43
- Swift vs. Kotlin 漫谈之扩展篇
- 大数据学习路线(包含全套视频教程)
- SpringBoot——安全管理(一)
热门文章
- 【CSS进阶】CSS 颜色体系详解
- [LeetCode]题解(python):013-Roman to Integer
- IQueryable和IQueryProvider初尝
- 关于IT企业如何建立内部wiki
- redhat-problem to be research
- MVP谈WinHEC:Demo很炫 Windows 7启动快
- 使用python编写单元测试
- mysql my.cnf 找不到_为什么我在mysql的my.cnf下找不到bind-address?
- perm函数c语言_理解C语言(三) 字符串处理函数
- windows python 访问mtp存储空间_Python 3.7 已上架 Microsoft Store,让你 轻松使用 Python...