vue踩坑(二):跨域以及携带cookie
最近后台需求要在请求的时候传cooki给后台,正常情况下拿到cookie后存在cookie里,同域名下是会自己带到请求头里的,但是因为要在本地调试,那么问题就来了,localhost:8080下面的cookie是不会带到线上的请求头里的,于是问题产生了,好了废话不多说,看看我踩坑的过程吧,希望对大家有所帮助。
首先我在main.js里面加了这么一段代码
这段代码我网上搜了下 说是叫拦截器,意思就是你可以在所有的接口请求之前 可以先执行你的方法,比如说:我后返回401是没有登录,那么我就可以在next里面写一个跳转,在没有登录的时候 跳转到登录页面。上面的request.credentials = true;这句代码的解释是 允许跨域携带cookie。这样处理完了我去查看我的接口请求,结果发现 cookie是带上了,但是又来了一个新的问题,那就是之前后台设置的允许所有跨域失效了(Access-Control-Allow-Origin:*)也就是所有的接口又产生了跨域请求。
2.解决新问题 跨域
在config文件新建一个 proxyConfig.js 配置内容如下:
module.exports = {
proxyList: {
'/': {
// 测试环境
target: 'http://bcwap.lanrentool.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '' //需要rewrite重写的,
}
}
}
}
然后在 config 下面的 index 里面加下面代码
var proxyConfig = require('./proxyConfig')
在 dev 配置里面加入:proxyTable: proxyConfig.proxyList,//跨域设置
最后在main.js 加入这句代码 Vue.http.options.xhr = { withCredentials: true }
这样配置就已经完成了
在你请求接口时 只需要请求域名后面的部分就可以了例如: 'http://bcwap.lanrentool.com/v1/ad/get_Ad_ListAction?ad_type=sybn&source=wap',
请求时只需要:
this.$http.get(‘v1/ad/get_Ad_ListAction?ad_type=sybn&source=wap’).then(function(res) {
_this.topBannerList = res.body.data;
})
致此,问题已经解决了。
有什么写错的地方欢迎评论指出,愿大家顺利解决问题。
参考:https://segmentfault.com/a/1190000008910576
vue踩坑(二):跨域以及携带cookie的更多相关文章
- ajax跨域,携带cookie
解决方案很简单. 直接上代码: web.xml中: 添加了 cors来解决跨域 (奇怪的是,credentials设置为false.反正这个是照搬的...) <filter> ...
- 关于 Angular 跨域请求携带 Cookie 的问题
在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...
- 跨域请求携带cookie
function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...
- jquery中$.get()如何让跨域请求携带cookie?
在这个get请求前面加上这个就好了~~~~
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- Vue解决接口访问跨域问题
随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
随机推荐
- innodb使用大字段text,blob的一些优化建议(转)
原文 https://yq.aliyun.com/articles/9072 最近看到一些老应用,在表结构的设计上使用了text或者blob的字段:其中一个应用,对blob字段的依赖非常的严重,查询和 ...
- docker-网络基础配置和dockerfile
00x1: 端口映射: 如图:这就是把容器的 5000端口和主机的32768端口相映射,所以通过访问主机的32768端口就可以访问容器的web界面 这个端口是系统默认的如果自定义命令:docker r ...
- 总结:Java 集合进阶精讲2-ArrayList
知识点:Java 集合框架图 总结:Java 集合进阶精讲1 总结:Java 集合进阶精讲2-ArrayList 初探: ArrayList底层结构是数组,是List接口的 可变数组的实现,所以会占用 ...
- Halcon Visinpro 破解版
目前测试过的破解版资料: halcon10 可用已测 完美破解 halcon12 可用已测 完美破解 halcon13 可用已测 完美破解 halcon17 可用已测 ...
- Linux下自己实现getopt功能
实现思路: 通过 pid_t pid = getpid() 来获取当前进程id,然后 sprintf(fname, "/proc/%d/cmdline", pid); 读取fnam ...
- Allegro16.6 PCB 导入DXF 外框后曲线不闭合
Allegro16.6 PCB 导入DXF 外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...
- jenkins部署web项目(不包含前后端分离)
本次部署的是非常非常传统的web项目, jsp页面那种, 一 首先给tomact设置管理员用户和管理员密码,这类的教程网上有很多,在<tomcat-users><tomcat-use ...
- .net core下载文件
上传的文件是在wwwroot下 通过保存的路径跟文件名称完成下载 public IActionResult DownloadFile() { var filePath = "/Upload ...
- leetcode每日刷题计划-简单篇day9
Num 38 报数 Count and Say 题意读起来比较费劲..看懂了题还是不难的 注意最后的长度是sz的长度,开始写错写的len 在下次计算的时候len要更新下 说明 直接让char和int进 ...
- Kubernetes dashboard安装
1. To download Dashboard plugin deployment YAML file from internet. #cd /home #mkdir k8s #cd k8s # w ...