使用vue-cli+axios配置代理進行跨域訪問數據
因為axios中只能使用get和post方法來進行請求數據沒有提供jsonp等方法進行跨域訪問數據
如果要使用axios直接進行跨域訪問是不可以的這是就需要配置代理了為什麼要配置代理呢
原因就是因為客戶端請求服務端的數據是存在跨域問題的而伺服器和伺服器之間可以相互請求數據是沒有跨域的概念如果伺服器沒有設置禁止跨域的許可權問題也就是說我們可以配置一個代理的伺服器可以請求另一個伺服器中的數據然後把請求出來的數據返回到我們的代理伺服器中代理伺服器再返回數據給我們的客戶端這樣我們就可以實現跨域訪問數據啦
如果不理解可以看依據看下圖
理解了這個原理之後我們就可以按照這個邏輯去配置了
1首先在本地全局安裝 vue-cli
2初始化項目axios-cross 項目名稱
3在axios-cross 項目中安裝依賴文件
4在axios-cross 項目中安裝axios
5在axios-cross 項目中安裝http-proxy-middleware中間件作為代理
6在axios-cross 項目的找到srcmainjs中引入axios
7為http-proxy-middleware這個中間件進行本地代理配置在axios-cross 項目中找到configindexjs
8在axios-cross 項目的找到srccomponentsHelloWorldvue代碼修改如下
9因為在新版的vue-cli的packagejson中webpack-dev-server沒有設置--open所以打開packagejson文件在scripts屬性中的dev屬性中手動添加--open如下代碼所示
10在cmd控制台中輸入npm run dev 啟動服務效果圖如下
因為axios中只能使用get和post方法來進行請求數據，沒有提供jsonp等方法進行跨域訪問數據
axios中文網址：https://www.kancloud.cn/yunye/axios/234845
// axios 中的GET請求
axios.get("/user", {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// axios 中的POST請求
axios.post("/user", {
firstName: "Fred",
lastName: "Flintstone"
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
如果要使用axios直接進行跨域訪問是不可以的，這是就需要配置代理了，為什麼要配置代理呢？
原因就是因為客戶端請求服務端的數據是存在跨域問題的，而伺服器和伺服器之間可以相互請求數據，是沒有跨域的概念（如果伺服器沒有設置禁止跨域的許可權問題），也就是說，我們可以配置一個代理的伺服器可以請求另一個伺服器中的數據，然後把請求出來的數據返回到我們的代理伺服器中，代理伺服器再返回數據給我們的客戶端，這樣我們就可以實現跨域訪問數據啦。
如果不理解可以看依據看下圖
理解了這個原理之後，我們就可以按照這個邏輯去配置了。
步驟：
1、首先在本地全局安裝 vue-cli
vue-cli網址：https://github.com/vuejs/vue-cli
npm install -g vue-cli
2、初始化項目(axios-cross 項目名稱)
vue init webpack axios-cross
3、在axios-cross 項目中安裝依賴文件
npm install
4、在axios-cross 項目中安裝axios
npm install axios -D
-D 等價於 --save-dev
-S 等價於 --save
5、在axios-cross 項目中安裝http-proxy-middleware中間件作為代理
npm install -S http-proxy-middleware
6、在axios-cross 項目的找到src/main.js中引入axios
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import router from "./router"
import axios from "axios" // 1、在這裡引入axios
Vue.prototype.$axios = axios; // 2、在vue中使用axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
template: "<App/>",
components: { App }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
7、為http-proxy-middleware這個中間件進行本地代理配置，在axios-cross 項目中找到config/index.js
"use strict"
// Template version: 1.2.6
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require("path")
module.exports = {
dev: {
// Paths
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: { // 在這裡配置如下代碼
"/api": {
target:"http://api.jisuapi.com/XXXXX", // 你請求的第三方介面
changeOrigin:true, // 在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
pathRewrite:{ // 路徑重寫，
"^/api": "/api" // 替換target中的請求地址，也就是說以後你在請求http://api.jisuapi.com/XXXXX這個地址的時候直接寫成/api即可。
}
}
},
// 以下代碼省略……
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
8、在axios-cross 項目的找到src/components/HelloWorld.vue，代碼修改如下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
// 在這裡把其他代碼刪除，添加button按鈕註冊一個點擊事件
<button @click="jsonpData">axios跨域獲取數據</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
msg: "Welcome to Your Vue.js App"
}
},
methods:{
jsonpData: function() {
var url = "/api"; // 這裡就是剛才的config/index.js中的/api
this.$axios.get(url)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
// 或者使用以下代碼也可
/*this.$axios({
method: "get",
url: url,
data: {
name: "axios",
id: "1"
}
})
.then(function(res) {
console.log(res);
})
.catch(function(err) {
console.log(err);
});*/
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
9、因為在新版的vue-cli的package.json中webpack-dev-server沒有設置--open,所以打開package.json文件在」scripts」屬性中的」dev」屬性中手動添加--open，如下代碼所示
"scripts": {
"dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "node build/build.js"
},
1
2
3
4
5
6
7
8
9
10、在cmd控制台中輸入npm run dev 啟動服務。效果圖如下：
這樣我們就可以通過配置好的代理，使用axios跨域請求數據啦！
※find命令與Linux文件擴展名
※對Linux定時任務的認識
TAG:程序員小新人學習 |