Vue axios与Go Frame后端框架的Options请求跨域问题详解


Posted in Javascript onMarch 03, 2020

跨域问题可从前后两端分开排查:

前端:Vue + axios

axios 请求头使用 'Content-Type': 'application/json',

并且在Header中设置了 Authorization 字段用于传递 Token,

参数未经 Qs 转码,

使用以下代码测试登录接口:

// 为方便操作,已将 axios 实例挂载到 this.$axios 上
this.$axios.post('/signin', {account: '', password: ''})
 .then(res => {
  console.log('成功:', res)
 })
 .catch(err => {
  console.log('失败: ', err)
 })

出现如下错误:

Access to XMLHttpRequest at 'http://127.0.0.1:8080/api/v1/signin' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

同时 POST 请求变成了 OPTIONS 请求,并且返回404,如下图:

Vue axios与Go Frame后端框架的Options请求跨域问题详解

这里有两个问题,一个是为什么 POST 变成了 OPTIONS?URL 路径没错,为什么又会返回 404?

POST 变 OPTIONS 问题涉及复杂跨域请求,符合以下任意一个条件的请求就算复杂请求:

  1. 使用了除 HEAD、GET、POST之外的请求方法;
  2. 头部字段不超出 Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type,并且 Content-Type 的值只限于 application/x-www-form-urlencoded、multipart/form-data、text/plain;

由于设置的 Authorization 字段,Content-Type 也设置为了 application/json,因此这个请求算复杂跨域请求,会在正式通信前增加一次 OPTIONS 查询请求,称为"预检"请求(preflight request),用于向服务器请求权限等信息,预检请求被成功响应后,才会发出真实的 POST 请求。

可为什么 OPTIONS 请求返回 404 呢?
通过上面的错误说明及分析,答案应该很清晰了,就是服务端路由未对 OPTIONS 类型请求做出响应,导致 404 的情况。

后端:GoFrame

GoFrame 的路由代码如下:

func init() {
 s := g.Server()
 // 绑定 CORS 中间件
 s.BindMiddleware("/api/*", middleware.CORS)
 s.Group("/api", func(group *ghttp.RouterGroup) {
  ...
  // 重点:此路由仅支持 POST
  group.POST("/signin", userController, "SignIn")
 }
}

/signin 的路由指定了请求方式为 POST,自然无法响应其他类型的请求,使用如下方式定义倒是可响应所有类型的请求:

group.ALL("/signin", userController, "SignIn")

这样就使该路由支持所有的请求方法,但需要在控制器的 SignIn 方法中做判断需要响应哪些类型的请求,很繁琐,不推荐此方式。

其实只要在 CORS 中间件中对 OPTIONS 请求做统一响应即可,上代码:

// CORS 允许接口跨域请求
func CORS(r *ghttp.Request) {
 // 使用框架默认的 CORS 设置
 r.Response.CORSDefault()
 if r.Method == "OPTIONS" {
  r.Response.WriteStatusExit(http.StatusOK)
 } else {
  r.Middleware.Next()
 }
}

另外需要注意的是,使用 GoFrame 框架,CORS 中间件要在全局添加,如果在路由组中添加,同样会出现 OPTIONS 请求 404 的情况,而且中间件的代码在请求过程中未执行,原因暂不清楚,还需要多了解下框架。

本文描述的跨域问题是在网页上使用 Vue + axios 时出现的,使用 Postman 工具调试则一切正常,这里记录下排查过程和解决方法,希望能帮到有需要的童鞋,有任何问题可以在评论里一起讨论下。

到此这篇关于Vue axios与Go Frame后端框架的Options请求跨域问题详解的文章就介绍到这了,更多相关Vue axios与Go Frame跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 #Javascript
vue中改变滚动条样式的方法
Mar 03 #Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 #Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 #Javascript
使用vue打包进行云服务器上传的问题
Mar 02 #Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 #Javascript
JS如何生成随机验证码
Mar 02 #Javascript
You might like
php获取系统变量方法小结
2015/05/29 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python多线程使用方法实例详解
2019/12/30 Python
pytorch标签转onehot形式实例
2020/01/02 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
运动会稿件50字
2014/02/17 职场文书
小班上学期个人总结
2015/02/12 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
重温入党誓词主持词
2015/06/29 职场文书
关于python中模块和重载的问题
2021/11/02 Python