关于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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
如何在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
destoon整合UCenter图文教程
2014/06/21 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php常用正则函数实例小结
2016/12/29 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
一端时间轮换的广告
2006/06/26 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python plotly画柱状图代码实例
2019/12/13 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python推导式的使用方法实例
2021/02/28 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
《乞巧》教学反思
2014/02/27 职场文书
国际会计专业求职信
2014/08/04 职场文书
作风大整顿心得体会
2014/09/10 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android