Vue_proxytable解决跨域请求

关键词

借助config文件夹下 index.js文件中的 proxyTable属性

---

proxyTable: {
    '/apis': {
    // 测试环境
        target: 'http://www.xxx.cn/',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        }              
    }
},

接口请求

fetch

fetch("/apis/test/xxx.php",{ // 这里用/apis替代了接口域名
      method:"post", // 请求方式
      headers:{
        "Content-type":"application/json",
        token:"xxx" // token
      },
      body:JSON.stringify({username:"xxx",password:"xxx"}) // 请求值
    })
    .then(result => {
      // console.log(result)
      return result.json() // JSON解析
    })
    .then(data => {
      console.log(data) // 得到返回的data数据
    })

axios

this.$axios.post("/apis/test/xxx.php",{username:"xxx",password:"xxx"})
        .then(data => {
          console.log(data)
        })

axios添加token

axios.defaults.headers.common['token'] = "xxx"
axios.defaults.headers.post["Content-type"] = "application/json"
或

import axios from 'axios'
import qs from 'qs'
import store from 'store'

// 设置请求超时时间
const http = axios.create({
  timeout: 20000
})

// POST请求前将数据转化成FormData对象
http.interceptors.request.use(config => {
  config.data = qs.stringify(config.data)

  // 判断是否存在token，如果存在的话，则每个http header都加上token
  if (store.get('token')) {
    config.headers['api-token'] = `${store.get('token')}`
  }
  return config
})

// 边缘处理
http.interceptors.response.use((res) => {
  if (res.data.code === 1) {
    return Promise.resolve(res)
  } else if (res.data.code === 10001 || res.data.code === 11506) {
    window.location = '/'
  } else {
    return Promise.resolve(res)
  }
}, (error) => {
  return Promise.reject(error)
})

// 请求类
class API {
  // GET请求
  get (controller, data = {}, config = {}) {
    let params = { params: data }
    const url = this.buildUrl(controller)
    return http.get(url, params, config)
  }

  // POST 请求
  post (action, data = {}, config = {}) {
    const url = this.buildUrl(action)
    return http.post(url, data, config)
  }

  // 构建请求url
  buildUrl (action) {
  ···
    let url = `/apis/${action}`
    return url
  }
}

const api = new API()

export default api