Vue实现跨域 - 爱码网

在脚手架项目中config------>index.js中，

Vue实现跨域

配置proxy：

Vue实现跨域

   proxyTable: {
        '/apis': {
          // 测试环境
          target: 'http://www.thenewstep.cn/test/testToken.php',  // 接口域名
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/apis': ''   //需要rewrite重写的,
          }              
      }
    },

在app.Vue使用fetch:

Vue实现跨域

 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)
    })

结果：

Vue实现跨域

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/>'
})

Vue实现跨域