关于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用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
深入探寻javascript定时器
Jan 02 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Angular2数据绑定详解
Apr 18 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
ES2020 新特性(种草)
Jan 12 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实现的农历算法实例
2015/08/11 PHP
php制作简单模版引擎
2016/04/07 PHP
php适配器模式简单应用示例
2019/10/23 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
js控制input输入字符解析
2013/12/27 Javascript
js图片预加载示例
2014/04/30 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
JS回调函数深入理解
2019/10/16 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python判断字符串与大小写转换
2015/06/08 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
django迁移数据库错误问题解决
2019/07/29 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015中秋祝酒词
2015/08/12 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL