vuejs 解決跨域訪問問題

首先：

config/index.js下面的proxyTable配置您的服務訪問基本地址,將changeOrigin設置為true即可,然后在你需要訪問接口的地方,這樣使用,以下是我的工程代碼(前提是你已經安裝了vue-resource,安裝方式是:

vue-resource 導入 
還有elementui導入方法都是一樣 這里就以vue-resource為例

npm installvue-resource --save

之后在需要導入的js中import還有use

import  VueResource from  'vue-resource'

Vue.use(VueResource)

// config/index.js module.exports = { // ... dev: { proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } }
}

 

/* eslint-disable */
<template>
  <div class="hello" style="background: fuchsia">
    <h1>您登陸{{ msg }}</h1>
    <button v-on:click="showDetails">獲取20服務器上接收所信息</button>
  </div>

</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    showDetails: function () {
      this.$http.post('api/RMSClient/useradmin/login?password=d90b21c4a61992ff330bade33e84633d&userName=444').then(function (res) {
        console.log(res) // 返回很多的數據,比如執行狀態,url,data等等
console.log(res.data)// 返回的json數據
console.log(res.data.message)// json對象里面的信息
this.msg = res.data.message
      })
    }
  }
}
</script>