关于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(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
vue transition 在子组件中失效的解决
Nov 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运行速度的一些小技巧分享
2012/07/03 PHP
php中{}大括号是什么意思
2013/12/01 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
用webpack4开发小程序的实现方法
2019/06/04 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python实现数据图表
2017/07/29 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
使用Python设计一个代码统计工具
2018/04/04 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python测试模块doctest使用解析
2019/08/10 Python
python实现代码统计程序
2019/09/19 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
2014三八妇女节活动总结
2014/03/01 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python