vue配置前端跨域

vue配置前端跨域

1、初始化vue項目

vue init webpack my-project # 初始化項目
cd my-project # 進入項目路徑
cnpm install # 安裝依賴
cnpm install axios -S # 安裝axios

2、在 src/main.js 中如下聲明使用

mport axios from ‘axios’;
Vue.prototype.$axios=axios;

3、在 config/index.js 中的 的dev 添加以下代碼，設置一下proxyTable
復制代碼

//加入以下
proxyTable:{
‘/api’: {
target : ‘http://127.0.0.1:8000’, //設置你調用的接口域名和端口號.別忘了加http
changeOrigin : true, //允許跨域
pathRewrite : {
‘^/api’:’’
// '‘這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替。
// 比如我要調用’http://127.0.0.1:8000/index/’，直接寫‘/api/index/’即可
}
}
},

4、在 config/dev.env.js 中設置以下代碼

module.exports = merge(prodEnv, {
NODE_ENV: ‘“development”’, //開發環境
API_HOST:"/api/"
})

5、在 config/prod.env.js 中設置以下代碼

module.exports = {
NODE_ENV: ‘“production”’,//生產環境
API_HOST:’“127.0.0.1:8000”’
}

6、說明

1 vue前端結局跨域主要思想是代理功能，比如：
　　　　　　　　　　vue項目：http://localhost:8080/
　　　　　　　　　　后端項目：http://127.0.0.1:8000/

2.在瀏覽器端訪問 http://localhost:8080/api/index/ 路徑時，vue會匹配到以 /api/ 開頭的請求

3.此時 vue會使用代理功能 自動轉發到 http://127.0.0.1:8000/index/ 此時就是同一個域，就不會觸發跨域問題

7.首先安裝axios
npm install axios
其次在config下的index.js中修改proxyTable

復制代碼

proxyTable: {
‘/api’: {
target:‘http://127.0.0.1:8000’,
// secure: false, // 如果是https接口，需要配置這個參數
changeOrigin:true,
pathRewrite:{
‘^/api’: ‘’
}
}
},

最后在main.js中將其注冊(注意除了修改src中的文件外，都需要重啟npm)

import axios from ‘axios’

Vue.prototype.axios = axios