关于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 相关文章推荐
JScript的条件编译
May 29 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
微信小程序实现上传图片功能
May 28 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
jQuery中选择器的基础使用教程
2016/05/23 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python魔术方法详解
2015/02/14 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python中id函数运行方式
2020/07/03 Python
工作证明范本(2篇)
2014/09/14 职场文书
公司租房协议书范本
2014/10/08 职场文书
2014年党委工作总结
2014/11/22 职场文书
办公室文员岗位职责
2015/02/04 职场文书
军训个人总结
2015/03/03 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
52条SQL语句教你性能优化
2021/05/25 MySQL
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android