关于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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
微信小程序自动客服功能
Nov 02 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
详解datagrid使用方法(重要)
Nov 06 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
MySQL授权问题总结
2007/05/06 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
jQuery基础语法实例入门
2014/12/23 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
护士自我鉴定
2013/10/23 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
经管应届生求职信
2013/11/17 职场文书
运动会入场解说词300字
2014/01/25 职场文书
单身联谊活动方案
2014/01/29 职场文书
税务干部鉴定材料
2014/02/11 职场文书
企业业务员岗位职责
2014/03/14 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
民事二审代理词
2015/05/25 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis