跨域請求配置

在vue專案下 找到  config  > index.js 檔案;修改 index.js 檔案下的 proxyTable 物件的內容；如下

    proxyTable: {
      '/api': {              //  '/api'相當於代表  http://localhost/Graduation_Thesis  可自行修改名字
        target: 'http://localhost/Graduation_Thesis', //我們需要請求的主要資料夾地址
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '' //路徑重寫
        }
      }
    },
 

這樣就可以跨域請求  http://localhost/Graduation_Thesis    下的檔案了，而需要獲取檔案下的 a.php 檔案 需要用 fetch/  來做請求

fetch  請求

fetch 類似於 ajax 資料提交，但 fetch 更好

export default {
  name: 'App',
  components: {
    appHeader:Header
  },
  created(){
    fetch('/api/a.php',{              //  /api既是上面跨域定義的檔案地址
      method:"post",                  //請求方式
      headers: {                      //請求頭
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body:{                          //傳送的請求內容
        username:'hw',
        pass:'123'
      }
    }).then(res => {
      return res.json();
    }).then(res => {
      console.log(res);
    })
  }
}
 

axios  請求

首先全域性安裝

npm install axios

在 mian.js 引用

//main.js

import axios from 'axios'


//讓 axios 可以全域性使用
Vue.prototype.$axios = axios

這樣就可以開始使用了

export default {
  name: 'App',
  components: {
    appHeader:Header
  },
  created(){
    this.$axios.post("/api/a.php",{
      username:'hw',
      pass:'1123'
    })
      .then(res =>{
        console.log(res);
      })
  }
}