vue axios 跨域

怎么说个开场白呢？

算了，还是直接上代码吧！

我直接在vue.config.js写上，最后module.exports 出去就好了

 devServer: {
    open: true,             //配置自动启动浏览器
    // host: "127.0.0.1",
    port: 8066,             // 当前vue项目 端口号
    https: false,
    hotOnly: false,         // https:{type:Boolean}
    // proxy: null,         // 设置代理
    // proxy: 'http://123.345.xxx:8088',          // 配置跨域处理,只有一个代理
    proxy: {
      // 配置多个代理
      "/api": {
        target:'http://123.345.xxx:8088',        // 记得每次修改，都需要重新build
        ws: true,
        changeOrigin: true,   // 允许跨域
        pathRewrite: {
          // 路径重写，
          "^/api": ""         // 替换target中的请求地址
        }
      }
    },
    before: app => {}
  },

如上代码，是基于vue-cli3来搭建的，它生成的文件和vue-cli2有点不一样。直接在根目录生成了vue.config.js：

我一般都是接口放在一个文件api.js单独管理请求数据，方便维护管理。

import axios from 'axios';
// import router from '../routerManuaConfig'
import router from '../router/index'
import store from "../store";
import Vue from 'vue';
import qs from 'qs'

var storeTemp = store;
axios.interceptors.request.use(
    config => {
        var curTime = new Date()
        var expiretime = new Date(Date.parse(storeTemp.state.tokenExpire))

        if (storeTemp.state.token && (curTime < expiretime && storeTemp.state.tokenExpire)) {
            // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = "Bearer " + storeTemp.state.token;
        }

        saveRefreshtime();

        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            if (error.response.status == 401) {
                var curTime = new Date()
                var refreshtime = new Date(Date.parse(window.localStorage.refreshtime))
                // 在用户操作的活跃期内
                if (window.localStorage.refreshtime && (curTime <= refreshtime)) {
                    return  refreshToken({token: window.localStorage.Token}).then((res) => {
                        if (res.success) {
                            Vue.prototype.$message({
                                message: 'refreshToken success! loading data...',
                                type: 'success'
                            });

                            store.commit("saveToken", res.token);

                            var curTime = new Date();
                            var expiredate = new Date(curTime.setSeconds(curTime.getSeconds() + res.expires_in));
                            store.commit("saveTokenExpire", expiredate);

                            error.config.__isRetryRequest = true;
                            error.config.headers.Authorization = 'Bearer ' + res.token;
                            return axios(error.config);
                        } else {
                            // 刷新token失败 清除token信息并跳转到登录页面
                            ToLogin()
                        }
                    });
                } else {
                    // 返回 401，并且不知用户操作活跃期内 清除token信息并跳转到登录页面
                    ToLogin()
                }

            }
            // 403 无权限
            if (error.response.status == 403) {
                Vue.prototype.$message({
                    message: '失败！该操作无权限',
                    type: 'error'
                });
                return null;
            }
        }
        return ""; // 返回接口返回的错误信息
    }
);

// 获取模板数据请求接口函数(本地)因为是本地的数据，接口处就./  威大佬说是直接从浏览器取就可以了
export const getModule = params => {
    return axios.get('./static/data/moduleData.json', {params: params}).then(res => res.data);
};

在所在的页面把上面的API文件引进去使用

import {getUserByToken,getModule} from './api/api';    // 先import进来
let loginParams = '';
getModule(loginParams).then(data => {            // 直接使用
    console.log(data)
})