关于vue 项目中浏览器跨域的配置问题


Posted in Javascript onNovember 10, 2020

1、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

2、同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

3、在项目中配置
打开项目找到config文件下的index.js,在js proxyTable中配置跨域,代码如下

proxyTable: {
   '/api': {
     target: 'http://***.com',//你要跨域的网址
    secure: true, 
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api'
    }
   }
  }

target: 你要跨域的网址
secure:如果是https接口,需要配置这个参数
changeOrigin : 这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的.
pathRewrite:重写
“ ‘^/api': ‘/api'” 这里的配置是正则表达式,以/api开头的将会被用用‘/api'替换掉,假如后台文档的接口是 /api/list/xxx
前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx

总结

到此这篇关于关于vue 项目中浏览器跨域的配置问题的文章就介绍到这了,更多相关vue 浏览器跨域配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
vue实现动态按钮功能
May 13 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
Vue + ts实现轮播插件的示例
Nov 10 #Javascript
vue router返回到指定的路由的场景分析
Nov 10 #Javascript
如何将Node.js中的回调转换为Promise
Nov 10 #Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 #Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 #jQuery
夯基础之手撕javascript继承详解
Nov 09 #Javascript
You might like
PHP编程网上资源导航
2006/10/09 PHP
PHP自动更新新闻DIY
2006/10/09 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
js实现网页随机验证码
2020/10/19 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Python实现购物车功能的方法分析
2017/11/10 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
一个SQL面试题
2014/08/21 面试题
电气专业应届生求职信
2013/11/01 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
李培根演讲稿
2014/05/22 职场文书
园林系毕业生求职信
2014/06/23 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
导游词怎么写
2015/02/04 职场文书
实施意见格式范本
2015/06/05 职场文书
工作态度怎么写
2015/06/25 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python