vue配置二级目录vue-axios跨域办法谷歌浏览器设置跨域
一。根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了。
在webpack.config.js(config—>index.js)文件里设置:
build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',//assetsPublicPath: '/dist',//如果项目放在二级目录,修改此处++2018年2月28日assetsPublicPath: '/cc',//如果项目放在二级目录,修改此处++2018年2月28日
........
这样打包后,cc就是你网站的二级目录,例如:websong.wang/lin7vue 这里的cc就是/lin7vue
二。原生ajax-->jQuery.ajax-->vue-axios可谓一路风雨,但是vue-axios不支持跨域,这里的跨域其实分开说,一种是开发时候,一种是上线。
1.我们开发时肯定要测试数据的,这时候的跨域就很是个大问题。解决办法,修改webpack配置:
在webpack.config.js(config—>index.js)文件里设置:
dev:{
proxyTable: {'/api': {target: 'http://baidu.com', //设置调用接口域名和端口号别忘了加httpchangeOrigin: true,pathRewrite: {'^/api': '/' //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替// 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add’即可 代理后地址栏显示/}}}
}
2.安装vue-axios:
通过查阅,知道vue-axios其实就是对axios的封装,网址:https://www.npmjs.com/package/vue-axios
安装:npm install --save axios vue-axios
注入:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)
使用:
//三种可用方法,npm上就列举了这三个写法,其详细使用方法和axios一样
Vue.axios.get(api).then((response) => {console.log(response.data)
})this.axios.get(api).then((response) => {console.log(response.data)
})this.$http.get(api).then((response) => {console.log(response.data)
})
axios官网:https://www.npmjs.com/package/axios 里面有详细的使用说明
3.上线项目vue-axios跨域:
在我们的项目中,不可能固定只向一个后端接口请求数据,而且跨域配置只针对dev开发环境,怎么办?有办法:参考:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
我的代码:
三。配置谷歌浏览器允许跨域
chrome浏览器的跨域设置——包括版本49前后两种设置
查看谷歌浏览器版本号:地址栏输入:chrome://settings/help
版本号49之前的跨域设置:
先介绍一下老方法,参考了一些网上的教程,其实直接在打开命令上加--disable-web-security就可以了。
具体做法为:
1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。
2.在属性页面中的目标输入框里加上 --disable-web-security 如下图所示:
3.点击应用和确定后关闭属性页面,并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”,那么说明配置成功。
版本号49之后的chrome跨域设置
chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏、历史记录等个人信息。49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cookie,很多网站的登录token信息都是保存在cookie里)。
具体做法为:
1.在电脑上新建一个目录,例如:C:\MyChromeDevUserData
2.在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir的值就是刚才新建的目录。
3.点击应用和确定后关闭属性页面,并打开chrome浏览器。
再次打开chrome,发现有“--disable-web-security”相关的提示,说明chrome又能正常跨域工作了。
摘自:https://www.cnblogs.com/cshi/p/5660039.html
转载于:https://www.cnblogs.com/webSong/p/8652092.html
vue配置二级目录vue-axios跨域办法谷歌浏览器设置跨域相关推荐
- nginx 二级目录 php,Nginx 配置二级目录支持
Nginx 配置二级目录并不像 apache 那么简单,但二级目录的配置在实际工作中又经常用到,现整理如下.欢迎大家访问 二愣的闲谈杂鱼 在 /etc/nginx 目录下创建文件夹 sublocati ...
- nginx配置二级目录,反向代理不同ip+端口
场景描述: 通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1 ...
- Nginx配置二级目录反向代理本机不同端口
前序 最近在家里的服务器上装了一大堆的服务器软件,大多数都需要Web网站访问的,比如:Gitlab.Apache.Jenkins等等.然而又因为是不同的应用,需要占用不同的端口,每次访问起来都需要在I ...
- nginx配置二级目录访问tomcat
之前没有接触过nginx,但公司运维出现问题,于是由我来修改nginx配置文件,添加二级目录来访问tomcat下的项目. 推荐博客: https://blog.csdn.net/daybreak120 ...
- wordpress linux 目录,Linux系统二级目录无法安装Wordpress解决办法 | 无忧主机
今天无忧主机的老用户李松李大哥在企业QQ上找到无忧小编说,为什么我把Wordpress程序上传到了子目录blog里面,而访问的时候安装不了呢?无忧主机小编分别使用二级域名和二级目录的方式进行访问测试, ...
- 域用户指定计算机,什么是AD域,如何设置AD域用户仅登录到指定的计算机
什么是AD域? 简单理解:Active Directory域内的directory database(目录数据库)是被用来存储用户账户.计算机账户.打印机和共享文件夹等对象,而提供目录服务的组件就是A ...
- nginx vue2+webpack 和 vue3+vite 配置二级目录访问
首先我们要配置一个106.13.0.11:8083/qfqzApp的二级路由,针对于vue2项目,我们需要进行一下操作. 1.nginx配置(vue2 和 vue3配置的nginx相同) server ...
- vue php 架构目录,Vue.js 目录结构
Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: 目录解析目录/文件说明build项目构建(webpack)相 ...
- 【vue】将vue配置为多页面应用,多页面应用设置默认跳转页面
项目经理要求让页面能跳转到默认地址 http://localhost:8080 ==> http://localhost:8080/home.html 一般使用单页面应用写的项目只需要把rout ...
最新文章
- 团队开发-----电子秘书(便签+闹钟+音视频)
- resource 注解下的name爆红
- 从ipa文件中导出图片
- Linux上的Django项目,下载文件报错,编码格式错误解决
- 【转】架构师Jack专访:全面认识软件测试架构师
- Opera Unite如何架设自己的网站
- PHP程序员进阶学习书籍参考指南
- Hibernate 缓存机制(转)
- linux安装protoc
- sketch 导出html,用 Sketch 设计和输出响应式网页
- 智能识别车道线、车辆、行人、停车标志
- [nk] 2022牛客寒假算法基础集训营1 补题|题解
- 要出发周边游APP产品体验报告
- Linux C/C++ 调试的那些“歪门邪道”
- CV算法工程师自修指南
- 有符号数与无符号数的除法(转载)
- 手机也能当门卡?!--NFC技术应用
- [生存志] 第53节 晏子春秋录纯臣
- 入住阿里云MQTT物联网平台
- tensorflow基本知识