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

背景

咱們都知道瀏覽器有一個既核心也最基本的安全功能，即同源策略。同源分別是:協議，域名，端口。若是瀏覽器訪問服務器不一樣源的話，就會訪問不到數據。那開發中經常訪問的服務器不一樣源，那麼能夠藉助一個服務器當作中介來訪問須要訪問的服務器從而得到數據。由於同源策略是瀏覽器的安全機制，而服務器之間是不受此限制的。
以前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)
}
複製代碼

2. 在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)
    })
}
複製代碼

請求到數據以下：

結語

如此就簡單實現了本地node服務器跨域，在開發環境下是能夠請求到數據，可是npm run build 打包成靜態文件後就失效了。路還很長，還請各位不吝賜教。