关于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实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
mysq GBKl乱码
2006/11/28 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
laravel学习教程之存取器
2016/07/30 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jquery选择器简述
2015/08/31 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python实现简单http服务器
2018/04/12 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
会计工作决心书
2014/03/11 职场文书
保密工作责任书
2014/04/16 职场文书
教师节感想
2015/08/11 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
java开发双人五子棋游戏
2022/05/06 Java/Android
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技