关于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与DropDownList 区别分析
Jan 01 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 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检测图片木马多进制编程实践
2013/04/11 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JS继承用法实例分析
2015/02/05 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python try except finally资源回收的实现
2021/01/25 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
学校校庆演讲稿
2014/05/22 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS