vue项目中的跨域请求，axios&jsonp

2018-03-14

记录vue项目中的跨域请求方法

天天画页面，写一些html css感觉自己就是一个无脑机器人，文章记录一下vue 中跨域请求

我们都知道由于同源策略，ajax无法进行跨域请求，在vue项目中，使用axios进行ajax请求。

使用axios

先奉上axios中文文档；具体操作按照教程来

1.构建项目，安装axios

1	$ npm install axios

新建一个ajax.js文件，用来对ajax作一定的封装
点击下载 ajax.js

import axios from 'axios'
import querystring from 'querystring'

const base = ''
axios.defaults.withCredentials = true
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.referer = 'https://cnodejs.org/'
axios.defaults.headers.host = 'cnodejs.org'

// 下面的方法就能发送请求
// var ajax = {
//   get: function(path, params){
//     var config = `${base}` + path + '?' + querystring.stringify(params)
//      return axios.get(config).then(res => res.data)
//   },
//   post: function(path, params){
//     return axios.post(`${base}` + path, params).then(res => res.data)
//   }
// }

// 以下是对发送的参数作了过滤空字符串的操作
var ajax = {
  get: function(path, params) {
    var config
    if (params === void 0) {
      config = `${base}` + path
    } else {
      params = trimObject(params)
      config = `${base}` + path + '?' + querystring.stringify(params)
    }
    return axios.get(config).then(res => res.data)
  },
  post: function(path, params) {
    if (params === void 0) {
      params = {}
    }
    params = trimObject(params)
    axios.post(`${base}` + path, params).then(res => res.data)
  }
}
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  return response
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

function trimObject(data) {
  var obj = data
  for (var k in obj) {
    if (Object.prototype.toString.call(obj[k]).slice(8, -1) === 'String') {
      obj[k] = obj[k].trim()
    } else if (Object.prototype.toString.call(obj[k]).slice(8, -1) === 'Object') {
      trimObject(obj[k])
    }
  }
  return obj
}

export default ajax

配置config中的index.js如下图：

执行git请求时候，最终路径为

1	`${base}` + path + '?' + querystring.stringify(params)

其中base是api中的基础链接，比如所有用户相关的api，中间可能会出现 /user/login…
/user/info…等等，这个user就是其中的base，当然，具体还是要视情况而定。

在页面中发送请求如下图

请求成功

使用jsonp

安装jsonp

1	cnpm install jsonp --save

新建一个jsonp.js文件，封装一个jsonp

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

在页面中调用：