VUE——axios跨域請求解決及post請求設置為FormData傳參

一、axios跨域請求解決

參考地址：https://blog.csdn.net/srttina/article/details/83309

自己最終配置成功代碼如下：

1、下載axios依賴，在main.js中引入，添加公共引用接口地址Host

npm i axios --save

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
//導入axios
import Axios from "axios"
//將axios掛載到原型
Vue.prototype.axios = Axios
Vue.prototype.Host = '/syrjia'

Vue.use(Vuex)
Vue.config.productionTip = false

2、config/index.js配置proxyTable

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/syrjia': {// 這里是公共部分，在調用接口時后面接不相同的部分，/api就相當於http://192.168.0.199:8926/api這一段
        target: 'http://localhost:8081/',//這里寫的是訪問接口的域名和端口號 http://localhost:8081/
        changeOrigin: true,// 必須加上這個才能跨域請求
        pathRewrite: { // 重命名
          '/syrjia': '/syrjia'
        }
      }
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },
}

3、請求數據

mounted () {
    //要以字符串拼接方式傳參並且請求頭設置成：{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
    let parmas='page='+1+'&row='+10+'&memberId=775745745747&channelId=jianyi'
    this.axios.post(this.Host+'/doctor/queryDoctorListUp.action', 
      //vue post請求設置為FormData傳參,如果直接以屬性：值的格式傳，會報錯
      parmas,
      {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
    )
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }