关于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 jQuery中的DOM操作
Mar 21 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
关于php开启错误提示的总结
2019/09/24 PHP
arguments对象
2006/11/20 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
python中global与nonlocal比较
2014/11/21 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python读写文件基础知识点
2019/06/10 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python实现UDP协议下的文件传输
2020/03/20 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
华三通信H3C面试题
2015/05/15 面试题
田径运动会开幕式及主持词
2014/03/28 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP