Vue實現跨域
阿新 • • 發佈:2018-12-20
在腳手架專案中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/>' })