vue封装axios调用.解决跨域

1.vue项目导入axios组件

• GitHub上有现成的做的半成品.拿过来直接就能用的.可以去找一下
• 我用的是vue-manage-system.可以直接百度搜索

2.与main.js同级创建新的.js命名为axios.config.js

• 可以多抽几个方法,用来区分表单提交,json提交. 提交文件,get/post/put/delete提交方式等.

import qs from 'qs';

axios.defaults.timeout = 3000;   //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
axios.defaults.baseURL = 'http://localhost:8094';   //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
    //在发送请求之前做某件事
    let token = sessionStorage.getItem('access_token') || '';  //获取token
    console.log(token);
    if (token != '') {
        config.headers = {
            'access-token': token,
            'Content-Type': 'application/x-www-form-urlencoded'
        };
    }
    if (config.method === 'post') {
        config.data = qs.stringify(config.data);//序列化post 参数
    }
    return config;
}, (error) => {
    console.log('错误的传参');

    return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) => {
    //对响应数据做些事
    if (!res.data.success) {
        let newToken = res.data.token;    //成功后更新token
        localStorage.setItem('access_token', newToken);

    }
    return res;
}, (error) => {
    if (error.response.data.status == '401') {    //如果token 过期 则跳转到登录页面
        this.$router.push('/login');
    }
    return Promise.reject(error);
});

//返回一个Promise(发送post请求)
function post(url, params) {
    return new Promise((resolve, reject) => {
        console.log('请求原地址url', url);
        // url = 'http://localhost:8094' + url;
        // console.log('请求处理完地址url', url);
        axios.post(url, params)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error);
            });
    });
}

//返回一个Promise(发送get请求)
function get(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, { params: param })
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error);
            });
    });
}

export default {
    get,
    post
};

3.在main.js中 注册一下

import ajax from './axios.config'
Vue.prototype.ajax=ajax

4.vue页面调用

      				let params={'username':"张三",'password':'111111'}
                    this.ajax.post('/user/testSelectById',params).then((res)=>{
                        console.log("res",res);
                    }).catch(err=>{
                        console.log(err)
                    })

5.解决后端跨域问题

• 第一种:后端代码controller加跨域的注解 @CrossOrigin
• 第二种:写过滤器

package com.service.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


/**
 * @program: service
 * @description: 前端跨域
 * @author: 单人影
 * @create: 2019-12-07 18:20
 **/
@Configuration
public class CorsConfig implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Expose-Headers", "*");
        response.setContentType("application/json;charset=UTF-8");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

过滤器详细见:https://blog.csdn.net/a185589690/article/details/103440652