vue 跨域cross配置

前言

vue进行接口调试的时候，如果涉及到服务器和本地的跨域问题的话，用get简单请求是可以获取到数据的，但是如果是post或者带有请求前缀如AccessToken之类的复杂请求的话需要配置config/index.js下的proxytable，否则会报跨域错误。

配置参数

proxyTable: {
      // 替换的简写
      '/api':{
        target:'https://www.apiopen.top',  // 接口地址
        changeOrigin: true // 是否跨域
        pathRewrite：{
          '^/api':''//注意实际接口不存在/api就需要重写去除，比较会提示server 503
        }
      }
    },

接口示例

import axios from '../utils/axios';
import qs from 'qs'
const service=axios.create({
  baseURL:'/api',//替代接口地址
  timeout:5000，
  // 处理参数
  transformRequest:[function(data){
    data=qs.stringify(data);
    return data;
  }]
})
export default service
export const regist =(key,phone,passwd)=>{
    const data={
        key,phone,passwd
    }
    return axios.post('/createUser',data)
}

Vue axios后台post参数为空

根本原因

目前java php node也好，后台接收的post数据都是基于发送时使用的application/x-www-form-urlencoded的传递方式，而axios默认的传递方式为Content-type为application/json，所以导致了默认的post传递数值为空。

解决方案：

1 改写userService（不推荐）
通过URLSearchParams处理参数，URLSearchParams的兼容性并不高，（需要polyfill，支持google不支持ie和360）

 // const params=new URLSearchParams({
    //     key,
    //     phone,
    //     passwd
    // })
    // return axios.post('/createUser',params);

2通过transformRequest每次请求前转换参数

const service=axios.create({
  baseURL:'/api',
  timeout:5000,
  // 处理参数
  transformRequest:[function(data){
    data=qs.stringify(data);
    return data;
  }]
})

参考资料：
axios post参数为null解决 https://www.jianshu.com/p/b22d03dfe006
axios发送POST请求时后台接收不到的问题 https://zhuanlan.zhihu.com/p/27498996