关于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 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
javascript函数特点实例分析
May 14 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 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中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
python实现画循环圆
2019/11/23 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
财务部岗位职责
2013/11/19 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
总经理岗位职责
2015/02/04 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python