vue-cli2跨域访问服务端接口

配置服务器访问接口地址需要考虑三种环境下的配置：分别是：

1.本地环境---即执行npm run dev 的环境
2.测试环境---即打包发布到测试服务器的环境--一般执行npm run build
3.生产环境---即打包部署到线上服务器的环境---一般执行npm run publish

本地环境：

如下图：本地环境中config的index.js文件中配置代理服务器，所谓代理服务器，顾名思义，使用一个字符串将下面一行url地址代替（此配置只适用于本地环境）

image.png

上图设置了3个代理服务器，分别使用/api /wgfw /dlfw
代理了三个服务器项目地址

接着，配置axios请求文件

'use strict'
import axios from "axios"
import Const from "./const" 
// 创建一个axios的对象
// application/x-www-form-urlencoded;charset=utf-8
const Axios = axios.create({
    baseURL: "",//这里不能使用前缀，因为全局项目不一定会访问一个域名
    method: 'post',
    apiType: '',
    timeout: 10000,
    responseType: "json",
    withCredentials: true, // 是否允许带cookie这些
    headers: {
        "Content-Type": "text/plain"
    }
});
//添加请求拦截器,在请求或响应被 then 或 catch 处理前拦截它们。
Axios.interceptors.request.use(
    config => {
        // 在发送请求之前做某件事
        //1.判断是否需要添加默认域名
        if (config.apiType === '1') {
            config.baseURL = Const.micro_base_url;
        } else 
        if (config.apiType === '2') {
            config.baseURL = Const.gateway_base_url;
        } else {
            config.baseURL = Const.spa_base_http;
        }
        return config;
    },
    error => {
      // 对请求错误做些什么,可以抓取错误日志
      console.log();
      return Promise.reject(error.data.error.message);
    }
);
//返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(
    res => {
        //对响应数据做些事
        return res.data;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

// 对axios的实例重新封装成一个plugin ,方便 Vue.use(xxxx)
export default {
    install: function (Vue, Option) {
        //使用Object.defineProperty为Vue绑定属性，且不可被修改
        Object.defineProperty(Vue.prototype, "$http", { value: Axios });
    }
};

如上代码先是对请求参数进行配置，接着添加请求拦截器，这里根据上面设置的一个apiType 参数对不同请求类型进行特殊处理（当前项目使用此参数判断使用哪个后端服务项目），并在请求或响应被 then 或 catch 处理前拦截它们
最后，将此调用服务的方法名称绑定为$http*

PS:

上述在判断apiType 的之后，引用了自己配置的const参数js
在此文件中，会根据当前环境给参数不同的值
主要code如下：

//spa服务器访问地址
let SERVER_BASE_URL;
let MICRO_BASE_URL;
let GATEWAY_BASE_URL;

switch (process.env.NODE_ENV) {
  case 'development':
    SERVER_BASE_URL = '/api';
    MICRO_BASE_URL = '/dlfw';
    GATEWAY_BASE_URL = '/wgfw';
    break
  case 'testing':
    SERVER_BASE_URL = '/aaa';
    MICRO_BASE_URL = 'http://test-xxx.com/xxxxx';
    GATEWAY_BASE_URL = 'http://test-api-xxx.com/xxx';
    break
  case 'production':
    SERVER_BASE_URL = '/aaa';
    MICRO_BASE_URL = 'http://xxx.com/xxxxx';
    GATEWAY_BASE_URL = 'http://api-xxx.com/xxx';
    break
  default:
    break
}
export default {
    spa_base_http:SERVER_BASE_URL,
    micro_base_url: MICRO_BASE_URL,
    gateway_base_url: GATEWAY_BASE_URL
}

在main.js中调用此文件，接着在vue页面中即可根据需要请求服务

   initInfo: function(type) {
      var _this = this;
      // 调服务
      _this
        .$http({
          apiType: '1',
          url: "/hongbaoyu/init?accessToken=" + localStorage.getItem("userToken"),
          data: {
          }
        })
        .then(res => {
          console.log(res);
          let data = res.result || {};
          if (res.reCode === "0") {
            // 通过
      
          } else {
            _this.pwdHint = "请求超时,请稍后再试";
          }
        })
        .catch(e => {
          console.log(e);
    
        });
    },

最后说明：
apiType参数是根据vue页面不同的传值请求不同域名服务器接口，而const中的switch则是根据不同运行环境，确定服务器接口url

最后编辑于：2020.05.08 14:35:59