vue-axios跨域配置

一、vue安裝axios：

簡介：

vue2.0之后，就不再對vue-resource更新，而是推薦使用axios。基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 Node.js 中使用。

功能特性
1、在瀏覽器中發送 XMLHttpRequests 請求
2、在 node.js 中發送 http請求
3、支持 Promise API
4、攔截請求和響應
5、轉換請求和響應數據
6、取消請求
7、自動轉換 JSON 數據
8、客戶端支持保護安全免受 CSRF/XSRF 攻擊

首先需要安裝axios：

$ npm install axios

在main.js文件里面引入使用:

$ import axios from 'axios'
$ Vue.prototype.$axios = axios

二、vue中axios的跨域使用：

1.什么是跨域？

跨域：指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

例如：a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。

同源策略：是指協議，域名，端口都要相同，其中有一個不同都會產生跨域；

 

在vue中使用本地代理的方式進行跨域或者使用jquery：

1.首先在main.js中，配置下我們訪問的Url前綴：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App/>'
})

關鍵代碼是：Axios.defaults.baseURL = '/api'，這樣每次發送請求都會帶一個/api的前綴。

2.配置代理修改config文件夾下的index.js文件，在proxyTable中加上如下代碼：

'/api':{
    target: "https://www.wd.com/dev",
    changeOrigin:true,
    pathRewrite:{
        '^/api':''
    }
}

3.修改url請求:

 this.$axios
     .get("/unit/queryTree")
     .then(res => {
        console.log(res.data);
     })
     .catch(err => {
        console.log(err);
 });

4.重啟服務就ok

原理：

因為我們給url加上了前綴 /api，我們訪問https://www.wd.com/dev/unit/queryTree就當於訪問了：https://www.wd.com/api/dev/unit/queryTree。(假設本地訪問端口號為 18936)

又因為在 index.js 中的 proxyTable 中攔截了 /api ,並把 /api 及其前面的所有替換成了 target 中的內容，因此實際訪問 Url 是https://www.wd.com/dev/unit/queryTree。

三、Vue3 版本

1.升級到 Vue3 后，會發現 Vue2 中存放配置的 config 文件夾沒有了，大家不要慌張。可以在 package.json 文件的同級目錄下創建 vue.config.js 文件。給出該文件的基礎配置：

module.exports = {
    outputDir: 'dist',   //build輸出目錄
    assetsDir: 'assets', //靜態資源目錄（js, css, img）
    lintOnSave: false, //是否開啟eslint
    devServer: {
        open: true, //是否自動彈出瀏覽器頁面
        host: "localhost", 
        port: '8080', 
        https: false,   //是否使用https協議
        hotOnly: false, //是否開啟熱更新
        proxy: null,
    }
}

Vue3 解決跨域，內容只有第二步配置代理 和 Vue2 不同，其他的一樣。

2.修改 vue.config.js 中 devServer 子節點內容，添加一個 proxy：

devServer: {
    open: true, //是否自動彈出瀏覽器頁面
    host: "localhost", 
    port: '8080',
    https: false,
    hotOnly: false, 
    proxy: {
        '/api': {
            target: 'https://www.v2ex.com/api', //API服務器的地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
}