关于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和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
JS 表单验证大全
2011/11/23 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
团组织关系介绍信
2014/01/12 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
优秀护士事迹材料
2014/12/25 职场文书
创建文明城市倡议书
2015/04/28 职场文书
民事上诉状范文
2015/05/22 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python