关于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 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
简单的js计算器实现
Oct 26 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
js实现前端分页页码管理
Jan 06 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 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中的观察者模式
2010/03/24 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Python正则表达式完全指南
2017/05/25 Python
关于Django外键赋值问题详解
2017/08/13 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Django入门使用示例
2017/12/12 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
企业管理标语
2014/06/10 职场文书
企业年检委托书范本
2014/10/14 职场文书
党建工作整改措施
2014/10/28 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
结婚司仪主持词
2015/06/29 职场文书
2019入党申请书格式
2019/06/25 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS