vue.js 跨域请求 fetch / axios

大 | 中 | 小
[不指定 2019/08/28 13:48 | by 刘新修 ]

 假设我们的请求地址：http://localhost/Graduation_Thesis/a.php

在vue项目下 找到  config  > index.js 文件;修改 index.js 文件下的 proxyTable 对象的内容；如下

JavaScript代码
  1. proxyTable: {  
  2.      '/api': {              //  '/api'相当于代表  http://localhost/Graduation_Thesis  可自行修改名字  
  3.        target: 'http://localhost/Graduation_Thesis', //我们需要请求的主要文件夹地址  
  4.        changeOrigin: true, //是否跨域  
  5.        pathRewrite: {  
  6.          '^/api': '' //路径重写  
  7.        }  
  8.      }  
  9.    },  

这样就可以跨域请求  http://localhost/Graduation_Thesis    下的文件了，而需要获取文件下的 a.php 文件 需要用 fetch/  来做请求

fetch  请求

fetch 类似于 ajax 数据提交，但 fetch 更好

JavaScript代码
  1. export default {  
  2.   name: 'App',  
  3.   components: {  
  4.     appHeader:Header  
  5.   },  
  6.   created(){  
  7.     fetch('/api/a.php',{              //  /api既是上面跨域定义的文件地址  
  8.       method:"post",                  //请求方式  
  9.       headers: {                      //请求头  
  10.         'Content-Type': 'application/json',  
  11.         'Accept': 'application/json'  
  12.       },  
  13.       body:{                          //发送的请求内容  
  14.         username:'hw',  
  15.         pass:'123'  
  16.       }  
  17.     }).then(res => {  
  18.       return res.json();  
  19.     }).then(res => {  
  20.       console.log(res);  
  21.     })  
  22.   }  
  23. }  

axios  请求

首先全局安装

JavaScript代码
  1. npm install axios  

在 mian.js 引用

JavaScript代码
  1. //main.js  
  2.    
  3. import axios from 'axios'  
  4.    
  5.    
  6. //让 axios 可以全局使用  
  7. Vue.prototype.$axios = axios  

这样就可以开始使用了

JavaScript代码
  1. export default {  
  2.   name: 'App',  
  3.   components: {  
  4.     appHeader:Header  
  5.   },  
  6.   created(){  
  7.     this.$axios.post("/api/a.php",{  
  8.       username:'hw',  
  9.       pass:'1123'  
  10.     })  
  11.       .then(res =>{  
  12.         console.log(res);  
  13.       })  
  14.   }  
  15. }  

 

技术分类 | 评论(0) | 引用(0) | 阅读(3541)