关于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 弹出层插件实现代码
Oct 24 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
js闭包实现按秒计数
Apr 23 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
JavaScript实现随机点名器
Mar 25 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python之父谈Python的未来形式
2016/07/01 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
初一学生评语大全
2014/04/24 职场文书
英语求职信范文
2014/05/23 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis