1. 程式人生 > >Vue實現跨域

Vue實現跨域

在腳手架專案中config------>index.js中,

配置proxy:

   proxyTable: {
        '/apis': {
          // 測試環境
          target: 'http://www.thenewstep.cn/test/testToken.php',  // 介面域名
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/apis': ''   //需要rewrite重寫的,
          }              
      }
    },

在app.Vue使用fetch:

 fetch("/apis/test/testToken.php",{
      method:"post",
      headers:{
        token:"f4c902c9ae5a2a9d8f84868ad064e706"
      },
      body:JSON.stringify({username:"henry",password:'321321'})
    }).then(result => {
      //console.log(result)
      return result.json()
    }).then(data => {
      console.log(data)
    })

結果:

axios方法實現:

main.vue配置:

import Vue from 'vue'
import App from './App'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.headers.common['token']="f4c902c9ae5a2a9d8f84868ad064e706"
axios.defaults.headers.post["Content-type"]="application/json"

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})