背景

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

具體操作

在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) } 復制代碼

在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 打包成靜態文件后就失效了。路還很長，還請各位不吝賜教。

總結

以上是生活随笔為你收集整理的新版vue-cli模板下本地开发环境使用node服务器跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。