新版vue-cli模板下本地開發環境使用node伺服器跨域

RobertChiao發表於2018-04-02
Vue開發環境伺服器跨域

背景

我們都知道瀏覽器有一個既核心也最基本的安全功能，即同源策略。同源分別是:協議，域名，埠。如果瀏覽器訪問伺服器不同源的話，就會訪問不到資料。那開發中常常訪問的伺服器不同源，那麼可以藉助一個伺服器當做中介來訪問需要訪問的伺服器從而獲得資料。因為同源策略是瀏覽器的安全機制，而伺服器之間是不受此限制的。
之前vue-cli模板build資料夾下有dev-serve.js檔案，可以在此檔案中配置本地node伺服器實現跨域，現在的模板下沒有此檔案，那我們該如何使用node跨域呢？不逼逼，上方法。

具體操作

  1. 在build資料夾下面新建一個dev-serve.js檔案，其中新增程式碼如下：
'use strict'
const express = require('express')
const axios = require('axios')

module.exports = function () {
    let app = express()
    app.get('/api/getDiscList', (req, res) => {
        let url = '請求地址'
        axios.get(url, {
            headers: {
            //這裡請求的是QQ音樂的介面，帶上下面引數是為了騙伺服器是自己人
                referer: 'https://c.y.qq.com/',
                host: 'c.y.qq.com'
            },
            params: req.query
        }).then((response) => {
            res.json(response.data)
        }).catch((e) => {
            console.log(e)
        })
    })

    app.listen(3000)
}
複製程式碼
  1. 在build.js中引入並且執行
    只需要在最上面新增 require('./dev-serve.js')()
    當我們npm run dev執行專案的時候，node伺服器就會啟動自動監聽3000埠

3.本地傳送ajax請求，就可以通過node伺服器訪問到資料，請求我使用的是axios。請求如下：

import axios from 'axios'
function getDiscList() {
   

    const data = {
        //...請求引數
    }
    return axios.get('/api/getDiscList', {
        params: data
    }).then(res => {
        return Promise.resolve(res.data)
    })
}
複製程式碼

請求到資料如下：

新版vue-cli模板下本地開發環境使用node伺服器跨域
新版vue-cli模板下本地開發環境使用node伺服器跨域

結語

如此就簡單實現了本地node伺服器跨域，在開發環境下是可以請求到資料，但是npm run build 打包成靜態檔案後就失效了。路還很長，還請各位不吝賜教。

相關文章