1、小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 为什么跨域同源非同源自己去查吧,在webpack配置一下proxyTable就OK了。

  如下 :config/index.js

dev: {
//proxyTable参数加入以下
proxyTable: {
'/api': {
target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们调接口时直接用api代替,比如我要
调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可,但是实际接口是没有/api的,所以需要重写
}
}
},

  试一下,跨域成功了,但是注意了,这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',//开发环境
API_HOST:"/api/"
})
module.exports = {
NODE_ENV: '"production"',//生产环境
API_HOST:'"http://40.00.100.100:3002/"'
}

  当然不管是开发还是生产环境都可以直接请求http://40.00.100.100:3002/。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,我们在任何组件里都能用process.env.API_HOST来使用地址如

instance.post(process.env.API_HOST+'user/login', this.form)

  然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。

  综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的。某大神说:此方法ie9及以下不好使,如果需要兼容,最好的办法是后端在服务器端口加个代理,效果类似开发时webpack的代理。

2、axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点,建议方式

//在main.js中如下声明使用
import axios from 'axios';
Vue.prototype.$axios=axios;
//那么在其他vue组件中就可以this.$axios调用使用

3、axios发送get/post请求问题

  发送post请求时一般都要设置Content-Type,发送内容的类型。

  application/json指发送json对象,但是要提前stringify一下。

  application/xxxx-form指发送?a=b&c=d格式,可以用qs的方法格式化一下,qs在安装axios后会自动安装,只需要组件里import一下即可。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'} const postData=Qs.stringify(this.formCustomer);//过滤成?&=格式
'Content-Type':'application/xxxx-form'}

4、axios拦截器的使用

  当我们访问某个地址页面时,有时会要求我们重新登录后再访问该页面,也就是身份认证失效了,如token丢失了,或者是token依然存在本地,但是却失效了,所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误,授权出错,也就是没有权利访问该页面。我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器,有token值则配置上token值
axios.interceptors.request.use(
config => {
if (token) { // 每次发送请求之前判断是否存在token,
             如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
config.headers.Authorization = token;
}
return config;
},
err => {
return Promise.reject(err);
}); // http response 服务器响应拦截器,这里拦截401错误,并重新跳入登页重新获取token
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case :
// 这里写清除token的代码
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error.response.data)
});

5、如何将Vue项目放置在服务器上,这里以Tomcat为例:

  必须要配置的就是在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run build,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist,里面有一个static文件夹和index.html,然后我就将dist目录下的文件拷贝到Tomcat服务器下,会发现访问到的是一个空白页面,然后浏览器会报很多404错误,其实就是index.html文件引入的那些js文件路径不匹配导致。但是当我把它放在..\webapps\ROOT目录下,它就可以访问了。(Tomcat下面的目录结构如上图)但是这肯定是不行的,然后我就开始寻找答案,也根据别人的一些步骤做了下来,后来发现还是有一些问题的,没有办法访问到主页面,虽然吧,一直都没成功,但是我也没放弃,然后就综合了一下问答里面别人说的,进行了几次尝试,最后成功了。我就改了两处,就是assetsPublicPath所对应的值,我这里用的是./,我也用webapps下的命的项目名试过,只是没得到我想要的结果,后来我还是改成了./。

axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. 踩坑记录:ubuntu下,http代理无法修改的问题

    事情经过: 今天在ubuntu下使用http代理的时候,碰到一个奇怪的现象.就是在当前shell窗口下,输入“env  | grep proxy”,显示的http_proxy一直都存在,即使我修改了本 ...

  4. vue cli 解决跨域 线上 nginx 反向代理配置

    前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...

  5. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  6. SpringBoot + Shiro + shiro.ini 的踩坑记录

    0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...

  7. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  8. ABP框架踩坑记录

    ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...

  9. SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录

    Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...

随机推荐

  1. Python五子棋的小程序

    代码是在开源中国上看到的,源代码网址:http://www.oschina.net/code/snippet_2365439_48010 需要安装graphics模块,下载地址:http://mcsp ...

  2. Qt笔记——多线程

    这个例子是,点击开始按钮,数字累加,点击停止按钮,数字不动. 1,新建一个类,里面是子线程的内容 #ifndef MYTHREAD_H #define MYTHREAD_H #include < ...

  3. 解决报错:Access denied for user 'root'@'xxx' ,MySQL不允许从远程访问的方法 .

    原文地址:传送门 例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话. GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDEN ...

  4. 前端读者 | 前端开发者调试面板vConsole

    来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...

  5. OpenStack 安装数据库和rabbitmq消息队列 (三)

    一)安装配置数据库 1.1.安装包 # yum install mariadb mariadb-server python2-PyMySQL -y 1.2.配置数据库 # vim /etc/my.cn ...

  6. SpringMVC完成文件上传的基本步骤

    1.修改form表单的提交方式 2.将文件存入磁盘 3.配置视图解析器 1).前端文件 --需要在form表单中添加 enctype="multipart/form-data"属性 ...

  7. 【cocos2d-js教程】cocos2d-js 遮挡层(禁止触摸事件传递层)

    在游戏中,我们经常会碰到一些弹窗,这些弹窗禁止点透,也就是禁止触摸事件传递到底层,我们称之为遮挡层,这些遮挡层,需要开发遮挡层,我们首先得了解cocos2d-js的触摸传递机制,本文主要针对cocos ...

  8. ubuntu 18.04下,KMS_6.9.1服务器启动后,客户端连接一段时间因为libnice而crash的问题修复

    相应track issue: https://github.com/Kurento/bugtracker/issues/247 libnice crashes in socket code: g_so ...

  9. shell脚本学习(三)

    shell echo命令 显示普通字符串: echo "I am cat_crazy.'" 注:这里的双引号可以省略 显示转义字符: 如果要输出引号,*号等需要转义才能输出,如下 ...

  10. python中join函数的用法

    这个函数可以对字符串按照某种方式进行拼接,比如你要在三个字母中间都添加一个特定字符,就可以用这个函数实现 result = '*'.join(['A','B','C']) print(result) ...