Axios跨域&封装接口

Axios跨域请求问题处理：

1、在config文件夹下的prod和dev的js文件下添加域名

dev:
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api"'
});

prod:
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '" "'
};

 

2、在config文件夹下的index.js下对dev环境进行配置　

    proxyTable: {
      '/api': {
        target:'http://172.24.172.100:8080', // 设置你调用的接口域名和端口号
        changeOrigin: true, //跨域
        pathRewrite: {
          '^/api': 'http://172.24.172.100:8080' 
        }
      }
    },

 

Axios封装接口：

1. 在js里新建一个ajax.js，封装axios

import axios from "axios"

export default function (url, data={}, method="GET", headers) {
  return new Promise((resolve, reject) => {
    let promise = null;
    if(method==="GET"){
      promise = axios.get(url, {params: data, headers})
    }else if(method==="POST"){
      promise = axios.post(url, data, {headers})
    }
    promise
      .then(response=>resolve(response))
      .catch(err=>{
        // console.log("/src/axios/ajax.js----error: "+err)
        reject(err)
      })
  })
}

 

2.再新建一个index.js，用于存放封装的调用接口（每个接口分别暴露）

import ajax from './ajax'  // 引入刚刚封装的axios

export const preFixed = "/api";    // dev
// export const preFixed = "";    // prod 产品上线环境

/****************** 图片上传接口 ******************/
export const requestImageUrl = (formData)=>{
  const url = preFixed+"/developer/uploadImage/getImageUrl";
  return ajax(url, formData, "POST")
};
// dev的时候preFixed为调用的端口号，prod时preFixed应为空

 

3.再文件中单独引用

// 因为刚刚创建的封装接口的文件为index.js，所以这里直接找到js会默认拿到js中的index.js 这是vue默认
 import {requestImageUrl} from '../../assets/js'

 async fileImg(e){
      let that = this;
      that.files=e.target.files[0];
      let formdata = new FormData();
      formdata.append("Image", e.target.files[0]);
      
    // 直接调用封装的方法，传入属性，解构即可
      const res = await requestImageUrl(formdata)
      console.log(res)
    },

 

4.也可以在main里一起引用，在main.js中加入以下代码  （3.4任选其一即可）

import ajax from './assets/js/ajax'
Vue.prototype.ajax= ajax