axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

一、小小的提一下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的代理。

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

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

三、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'}

四、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 401: // 这里写清除token的代码
 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath}//登陆成功后跳入浏览的当前页面
 }) } } return Promise.reject(error.response.data) });

五、如何将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下的命的项目名试过，只是没获得我想要的结果，后来我仍是改为了./。