vue跨域,复杂请求,后端为beego
关于跨域,网上讲得很多,具体实施起来大多讲的不详细,贴我的vue端代码
require('es6-promise').polyfill()
import fetch from 'isomorphic-fetch'
const tokenstr = '保密'
/**
* post请求
* @param {String} options.url api地址
* @param {String} options.querydata querydata参数
* @return {Promise} Promise
*/
const _fetch = ({ url, querydata }, commit) => {
if (commit) commit('START_LOADING')
let _url = `http://127.0.0.1:88/v1${url}`
return fetch(_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + tokenstr
},
body: querydata
})
.then((res) => {
if (commit) commit('FINISH_LOADING')
if (res.status >= 200 && res.status < 300) {
return res.json()
}
return Promise.reject(new Error(res.status))
})
}
主要是服务端,我的服务端用的是golang的beego框架。
//跨域
func (c *BaseController) AllowCross() {
c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Origin", "http://localhost:8080") //允许访问源
c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS") //允许post访问
c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Headers", "Content-Type,Authorization") //header的类型
c.Ctx.ResponseWriter.Header().Set("Access-Control-Max-Age", "")
c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Credentials", "true")
c.Ctx.ResponseWriter.Header().Set("content-type", "application/json") //返回数据格式是json
}
这里在BaseController中写过函数,其它Controller函数继承BaseController,并在每个方法中调用下这个函数。
另外,由于我的header用了 ‘Authorization’,这样属于复杂请求,对于复杂请求,浏览器会自动先发一个options请求,那么在后端路由中也需要加这个options请求的路由,(如果不是用框架,就直接判断请求类型)
beego.NSNamespace("/*",
//Options用于跨域复杂请求预检
beego.NSRouter("/*", &v1.BaseController{}, "options:Options"),
),
BaseController中加入Options的处理方法,(事实上Options返回的内容是啥一点也不重要)
func (c *BaseController) Options() {
c.AllowCross() //允许跨域
c.Data["json"] = map[string]interface{}{"status": , "message": "ok", "moreinfo": ""}
c.ServeJSON()
}
vue跨域,复杂请求,后端为beego的更多相关文章
- vue 跨域 springCloud @CrossOrigin注解
vue 跨域 springCloud @CrossOrigin注解 一丶什么是跨域 跨域问题来源于浏览器的同源策略,浏览器为了提高网站的安全性,在发送ajax请求时,只有在当前页面地址与请求地址的协 ...
- Django+Vue跨域配置与经验
一.原理 同源?同源策略? 同源的定义是:两个页面的协议.端口和域名都相同 同源的例子: 不同源的例子: 同源策略SOP(Same origin policy)是一种浏览器约定,它是浏览器最核心也最基 ...
- 使用$.getJSON实现跨域ajax请求
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...
- 【笔记】vue-cli 开发环境中跨域连接后台api(vue-resource 跨域post 请求)
在vue-cli 项目中很多人会用到mock 数据(模拟数据),但是我觉得如果在真实的数据库交互中开发会更有安全感一些,所以查了一下百度很多人推荐的就是: 跨域! 跨域是什么概念?不同的主机名,同主机 ...
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- 用JQuery的$.getJSON发起跨域Ajax请求
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...
- vue跨域问题解决(生产环境)
vue跨域问题解决(使用webpack打包的) 配置代理:(config下index.js文件) module.exports = { dev: { env: require('./dev.env') ...
- vue跨域处理
本人对于vue跨域处理流程不是很清楚,特此理顺一遍. 1.在config中进行配置,该文件不是都存在,需要自己建: proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化 ...
随机推荐
- 通过真值树解析布尔表达式(eg:A&B|C)
第一步:求出一个表达式的truth tree 1.生成真值表 2.根据真值表生成真值树(合并短路产生相同的两个子树) /**************************************** ...
- mysql联表查询,使用phpStudy自带的
一.内联结.外联结.左联结.右联结的含义及区别在SQL标准中规划的(Join)联结大致分为下面四种:1.内联结:将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结.2.外联结:分为外左 ...
- <meta>标记
<meta>的主要作用: 是提供网页的元素信息 属性: http-equiv: 功能: 默认http协议文件头信息,当信息从服务器端传到客户端时,让浏览器正确的是显示, http_equi ...
- Spring MVC(十二)--使用ModelView实现重定向
上一篇总结了使用返回字符串的方式实现重定向以及重定向过程中传递字符串参数和pojo参数的过程,本篇总结另一种重定向的实现方式--返回ModelAndView 这次的场景是这样的:在页面输入一些信息添加 ...
- PAT甲级——A1098 Insertion or Heap Sort
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- HtmlHelper1
<div> @using(Html.BeginForm("Test","Default")) { 4 @Html.TextBox("nam ...
- BMP 图片格式
BMP根据颜色深度,可以分为2(1位).16(4位).256(8位).65536(16位)和1670万(24位)以及32位含有alpha通道.8位图像可以是 索引彩色图像外,也可以是灰阶图像,而索引 ...
- Useradd- Linux必学的60个命令
1.作用 useradd命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s shell] [-c comment] [-m [-k t ...
- COCI2014/2015 Contest#1 D MAFIJA【基环树最大独立点集】
T1725 天黑请闭眼 Online Judge:COCI2014/2015 Contest#1 D MAFIJA(原题) Label:基环树,断环+树形Dp,贪心+拓扑 题目描述 最近天黑请闭眼在 ...
- 跟我一起在ubuntu中安装docker
卸载旧版本 $ sudo apt-get remove docker docker-engine docker.io 查看ubuntu版本 设置安装源 通过如下步骤,设置安装源仓库,这里我们使用阿里源 ...