码农网

网站首页> 前端开发> vue.js

关于vue 项目中浏览器跨域的配置问题

众衡网络科技

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 浏览器跨域

本文地址:https://m.manongw.com/article/240.html

文章来源:转载于CSDN,转载网址为https://blog.csdn.net/m0_49016709/article/details/109594986

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

最近更新
热门素材
html5卡通章鱼素材,几何图形抽象设计

html5卡通章鱼素材,几何图形抽象设计

图片素材

html文字动画特效,文字虚线边框

html文字动画特效,文字虚线边框

文字特效

Bootstrap点击左侧垂直导航菜单全屏网页切换特效

Bootstrap点击左侧垂直导航菜单全屏网页切换特效

导航菜单

js+css3透明渐变风格导航菜单特效

js+css3透明渐变风格导航菜单特效

导航菜单

8款经典的css网站顶部导航栏样式

8款经典的css网站顶部导航栏样式

图片素材

js+css3网站顶部自适应导航栏菜单特效

js+css3网站顶部自适应导航栏菜单特效

图片素材

jQuery自定义添加删除表格行内容特效

jQuery自定义添加删除表格行内容特效

图片素材

jQuery+CSS3漂亮的下拉菜单选择框美化特效

jQuery+CSS3漂亮的下拉菜单选择框美化特效

css3实例

jQuery文字公告无限滚动轮播特效

jQuery文字公告无限滚动轮播特效

css3实例

jQuery+Layui省市区城市三级联动菜单选择特效

jQuery+Layui省市区城市三级联动菜单选择特效

css3实例