文章目錄

• 1.實現axios（如果懂請跳過）
• 2. 跨域請求
• • 2.1 跨域例子
  • 2.2 舉例說明

1.實現axios（如果懂請跳過）

安裝

npm install --save axios vue-axios

main.js添加

import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios'Vue.use(VueAxios, axios);

在組件中使用

Vue.axios.get(api).then((response) => {console.log(response.data) })this.axios.get(api).then((response) => {console.log(response.data) })this.$http.get(api).then((response) => {console.log(response.data) })

2. 跨域請求

協議（http/https)、域名(0.0.0.0)、端口號(8080)任意一個不同都是跨域。前端解決跨域可以通過代理來實現，就是把請求攔截下來并改成我們需要的url。

2.1 跨域例子

以下是基于vue-cli腳手架下創建的項目。實現的跨域請求例子如下：

• https://www.vue-js.com/api/v1/topics (vue自帶的api)
• https://www.baidu.com （百度）
• http://192.168.1.5:8080/project/getProByCId/1 （自己后端項目接口)

在vue組件點擊按鈕發送跨域請求:

<template><div><h1>hello</h1><div><button @click="askurl">跨域請求</button><button @click="askbaidu">百度請求</button><button @click="askpro">實驗項目請求</button></div></div> </template>

在vue組件中發送axios請求:

<script> export default {name: "Hello",methods: {//跨域請求askurl(){this.axios.get('/api/v1/topics').then(res=>{console.log(res.data);})},//askurl//請求百度askbaidu(){this.axios.get('/baidu').then(res=>{console.log(res.data);})},//askbaidu//請求項目askpro(){this.axios.get('/report/project/getProByCId/1').then(res=>{console.log(res.data);})}//askpro} } </script>

index.js中proxyTable中寫代理，如果有vue.config.js，寫的proxy里也是一樣的。

proxyTable: {//代理1'/api': { // 遇到'/api'的請求攔截下來，將跨域改成target的urltarget: 'https://www.vue-js.com/api',changeOrigin: true, //是否跨域，肯定truepathRewrite: { //重寫請求中的/api為空'^/api': ''}},//代理2'/baidu': { // 遇到'/baidu'的請求攔截下來，將跨域改成target的urltarget: 'https://www.baidu.com/',changeOrigin: true,pathRewrite: {'^/baidu': '' //重寫請求中的/baidu為空},},//代理3'/report': { // 遇到'/report'的請求攔截下來，將跨域改成target的urltarget: 'http://192.168.1.5:8080',changeOrigin: true,pathRewrite: {'^/report': ''},},//...其他代理},

記得重啟重啟重啟項目！！！！

2.2 舉例說明

• 需要的請求：https://www.vue-js.com/api/v1/topics
• 實際url請求：http://localhost:8080/api/v1/topics
• 代理目標：/api
• axios請求：/api/v1/topics
• 代理target：https://www.vue-js.com/api

代理簡易過程：

axios是通過默認域名’http://localhost:8080‘發送的請求，所以發出請求URL為：
’http://localhost:8080‘（域名）+ ’/api/v1/topics‘（請求） = ’https://www.vue-js.com/api/v1/topics‘

這時候代理發現請求中帶有’/api‘，并攔截下來，并把域名’http://localhost:8080’替換成target里的域名’https://www.vue-js.com/api’,于是替換后請求URL就會變成：
‘https://www.vue-js.com/api/api/v1/topics’
(這里需要注意：是把域名改成target，不包括攔截的請求中的‘/api’)

于是我們需要重寫攔截下來的請求中的‘/api’（就是上面那個請求‘https://www.vue-js.com/api/api/v1/topics’的第二個‘api’），把它去掉。于是就有了pathRewrite: { ‘^/api’: ‘’}。這樣重寫后請求URL就會變成：
‘https://www.vue-js.com/api/v1/topics’

總結

以上是生活随笔為你收集整理的vue跨域请求(举例子细说）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。