关于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中美元符号命名冲突问题
Jan 08 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
Javascript实现的StopWatch功能示例
Jun 13 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
Vue实现简单分页器
Dec 29 Javascript
JS数组转字符串实现方法解析
Sep 04 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
img的onload的另类用法
2008/01/10 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
JavaScript计算出两个数的差值
2020/03/19 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python抓取京东商城手机列表url实例代码
2013/12/18 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python单例模式的两种实现方法
2017/08/14 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python字符串下标与切片及使用方法
2020/02/13 Python
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
质量负责人任命书
2014/06/06 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2016公司新年问候语
2015/11/11 职场文书
新学期开学寄语2016
2015/12/04 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
详解Java实践之建造者模式
2021/06/18 Java/Android