Vue-CLI 3.x 跨域問題處理

wsAdmin發表於2019-09-05
Vue跨域
windows 10
vue-cli 3.11.0
$ vue create [專案名稱]

注意:因為vue-cli2.x 與 vue-cli3.x 差別很多,在版本3中精簡了很多檔案,其中就有vue.config.js檔案

1.新增配置檔案

在package.json檔案的同級目錄下建立vue.config.js檔案,檔案的格式應該為:

// vue.config.js
module.exports = {
  // 選項...
}

2.基礎配置:

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,
    }
}

官網給出了豐富而全面的配置，更多配置請參考官方配置文件

3.設定代理(開發環境下)

我們在前後端分離開發時,不得不面對跨域問題,對於跨域,可以用兩種辦法進行處理.

  • 安裝nginx，將後端和前端都代理帶nginx上。
  • 在vue.config.js檔案中配置proxy屬性,將API請求代理到API伺服器上,設定devServer.proxy 
    devServer: {
    open: true, //是否自動彈出瀏覽器頁面
    host: "localhost", 
    port: '8080',
    https: false,
    hotOnly: false, 
    proxy: {
        '/api': {
            target: 'http://www.vueadmin.io', //API伺服器的地址
            ws: true,  //代理websockets
            changeOrigin: true, // 虛擬的站點需要更管origin
            pathRewrite: {   //重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
                '^/api': ''
            }
        }
    },
}
//若是原後端API介面地址為 http://www.vueadmin.io/index.php/admin/Index/index,則此時設定API代理後,訪問API介面應該寫為:/api/index.php/admin/Index/index,只有在新增'/api'後才會被proxy代理到.

設定代理的處理跨域方式只限於在本地開發環境下處理跨域問題,若打包部署線上環境需要在服務端處理

  • 服務端:ThinkPHP5
  • 在其入口檔案處新增以下內容: 
    // 准許跨域請求。
header("Access-Control-Allow-Origin: * ");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
/**
* 瀏覽器第一次在處理複雜請求的時候會先發起OPTIONS請求。路由在處理請求的時候會導致PUT請求失敗。
* 在檢測到option請求的時候就停止繼續執行
*/
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
exit;
}

    原文連結

我們習慣在jQuery 中使用Ajax的Jsonp傳送跨域請求,但是vue本身不支援傳送Ajax請求，需要使用vue-resource、axios等外掛實現。axios是一個基於Promise的HTTP請求客戶端，用來傳送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護，但是axios本身並不支援傳送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios新增支援傳送跨域請求，所以我們只能選擇使用vue-resource傳送跨域請求。

  • 安裝vue-resource：npm install vue-resource --save
  • 基本用法： 
    //在main.js中引入 "vue-resource"
import VueHttp from "vue-resource";
//註冊,以便在全域性使用
Vue.use(VueHttp);
//在元件中使用
this.$http.jsonp(url,[ops]).then((response)=>{
//請求成功處理業務邏輯
})
//注意:jsonp跨域請求只能使用GET方式
  • 基本例子演示： 
    // 客戶端
<script>
var vm = new Vue({
    el:"#app",
    methods:{
        sendJsonp:function(){
            this.$http.jsonp('https://xxxxxxxxxx',
            {
                params:{
                    id:"123456",
                    t:1,
                },
                jsonp:'callback' //設定jsonp回撥的函式名
            }).then(function(res){
                    console.log(res.data);
            });
        }
    }
});
</script>
//服務端(PHP)
<?php
$id = $_GET['id'];
$t = $_GET['t'];
$jsonp = $_GET['callback'];//get接收jsonp自動生成的函式名
$id = $id+1000;
$t = $t +3;
$arr = array(
'id' => $id,
't' => $t
);
echo $jsonp.'('. json_encode($arr). ')'; //jsonp函式名包裹json資料

    學習原文① | 學習原文②

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章