关于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 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js中replace的用法总结
Dec 27 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
如何在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
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
用python代码做configure文件
2014/07/20 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python 处理文件的几种方式
2019/08/23 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
法国足球商店:Footcenter
2019/07/06 全球购物
车工岗位职责
2013/11/26 职场文书
教师新年寄语
2014/04/03 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle