跨域请求方法

数据请求

1.axios

npm install axios

import axios from "axios";

...

getAxios() {
    axios({
        url: "http://api.test.jgjapp.com/jlcfg/cities",
        method: "get", //method默认是get请求
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        params: {
            // ？search后面的值写在params中
            level: "2",
            citycode: "110000"
        }
    })
        .then(function(res) {
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });
},

2.axios跨域请求

若协议 + 域名 + 端口号均相同，那么就是同域；否则是跨域

外部公用接口：https://www.apiopen.top/api.html

跨域请求接口：https://yinshusi.com/msBank/zhz/get_code?type=job&pcode=1000000

跨域请求方法：proxy--代理设置

Vue项目

在vue项目的根目录下添加 vue.config.js文件

module.exports = {
    devServer: {
        proxy: {
            '/msBank': {
                target: 'https://yinshusi.com/msBank',   // 需要请求的地址
                changeOrigin: true,  // 是否跨域
                pathRewrite: {
                    '^/msBank': '/'  // 替换target中的请求地址，也就是说，在请求的时候，url用'/msBank'代替'https://yinshusi.com/msBank'
                }
            },
            '/userFeedback': {
                target: 'https://api.apiopen.top/userFeedback',  
                changeOrigin: true,  
                pathRewrite: {
                    '^/userFeedback': '/'  
                }
            }
            <!-- 可配置多个跨域接口 -->
        }, 
    }
}

Rract项目

也可以在webpack.config.js中做与Vue项目相同的设置

打开项目生成的package.json文件，增加文件内容如下：

"proxy":{
  "/msBank":{
    "target":"https://yinshusi.com/msBank",
    "changeOrigin":true
  }
}

配置后需要重新启动项目

npm install axios

import axios from "axios";

...

getData() {
  axios({
    url: 'msBank/zhz/get_code',
    method: "GET", //默认是get请求
    params: {
      //？search后面的值写在params中
      type:'job',
      pcode:'1000000'
    }
  })
    .then(function(val) {
      console.log(val);
    })
    .catch(function(err) {
      console.log(err);
    });
},

postData() {
  axios({
    url: "userFeedback",
    method: "POST", //默认是get请求
    params: {
      //？search后面的值写在params中
      apikey:'9648872f9aa08da137ce45fe1dda8279',
      text: "反馈内容",
      email: "18380439999"
    }
  })
    .then(function(val) {
      console.log(val);
    })
    .catch(function(err) {
      console.log(err);
    });
}

3.axios封装

api.js:

import axios from 'axios'
import { Message, Loading } from 'element-ui'

// true 测试服务器 false 开发服务器
const test = false

const baseURL = `http://api.${test ? 'test.jgjapp' : 'jgjapp'}.com/`
const instance = axios.create({
  baseURL,
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

let loadingInstance = null,
count = 0//控制loading加载框，用计数方式控制是为了防止页面中同时请求多个接口加载框提前关闭的情况

<!-- steps4_发送请求 -->
instance.interceptors.request.use((config) => {
  let { data: configData } = config
  count++
  if (configData.loading) {
    loadingInstance = Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
  }

  let token = localStorage.getItem('token') || ''

  delete configData.loading

  let formData = new FormData()//通过FormData构造函数创建一个空对象
  for (let k in configData) {
    formData.append(k, configData[k])//可以通过append()方法来追加数据
  }
  //固定参数
  formData.append('os', 'WP')
  formData.append('client_type', 'wp')
  formData.append('token', token)


  let data = {
    os: 'WP',
    client_type: 'wp',
    token,
    ...config.data
  }

  if (config.method === 'get') {
    config.params = {
      ...data
    }
  } else if (config.method === 'post') {
    config.data = formData// 等同于qs.stringify(data)
  }

  return config
})

<!-- steps4_请求返回 -->
instance.interceptors.response.use((res) => {
  if (count > 0) {
    count--
  }
  if (loadingInstance && count === 0) {
    loadingInstance.close()
    loadingInstance = null
  }

  let { data } = res
  // todo:有的接口没有返state
  // void 0===undefined
  if ((data.state !== void 0 && data.state == 0) || (data.code !== void 0 && data.code != 0)) {
    // 登录失效,请重新登录
    if (data.errno == 10035 || data.code == 10035) {
      localStorage.removeItem('token')
    }
    Message({
      center: true,
      customClass: 'message-center',
      message: data.errmsg || data.msg,
      type: 'error'
    })
    return data
  } else {
    data = data.values || data.result
  }
  return data
}, error => {
  if (count > 0) {
    count--
  }
  if (loadingInstance && count === 0) {
    loadingInstance.close()
    loadingInstance = null
  }
})

<!-- steps3 -->
/**
 *
 * @param {string} url 接口地址
 * @param {string} method 方法 'post' || 'get'
 * @param {object} config 要提交的数据
 */
const create = (url, method, config = {}) => {
  config = {
  	loading: true,
  	...config
  }
  return instance({
  	url,
  	method,
  	data: {
  	  ...config
  	}
  })
}

<!-- steps2 -->
const hire = {
  getList: config => create('接口地址','请求方式',参数),
  getDetail: config => create('recruitment/pro-recruitment-detail','get',config),
}

<!-- steps1 -->
export default {
  hire,
}

getList.vue:

import api from "../api";

...

methods：{
  // 请求数据
  async getList(pid) {
    const data = await api.hire.getList({
      pid: pid
    });
    // console.log("数据：", data);
  }
}

4.jsonp

npm install jsonp

import jsonp from "jsonp"

...

<!-- 简易版 -->
methods: {
    getJsonp() {
        jsonp(
            `http://api.map.baidu.com/place/v2/suggestion?query=1&output=json&ak=vaVH6Ls3Tisndi940ma2keNeGSm0UvH4&region="110100"`,
            null,
            (err, data) => {
                if (err) {
                    console.error(err);
                } else {
                    console.log(data);
                }
            }
        );
    }
}

<!-- 参数版 -->
methods: {
    <!-- 处理参数 -->
    params(data) {
      let url = "";
      for (let k in data) {
        let val = data[k] !== undefined ? data[k] : "";
        url += `&${k}=${encodeURIComponent(val)}`;
      }
      return url ? url.substring(1) : "";
    },

    <!-- jsonp请求 -->
    getJsonp() {
      let url = "http://api.map.baidu.com/place/v2/suggestion";
      let data = {
        query: 1,
        output: "json",
        ak: "vaVH6Ls3Tisndi940ma2keNeGSm0UvH4",
        region: "110100"
      };
      jsonp(
        (url += (url.indexOf("?") < 0 ? "?" : "&") + this.params(data)),
        (err, data) => {
          if (err) {
            console.error(err);
          } else {
            console.log(data);
          }
        }
      );
    }
  }

DEMO下载