新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法
背景
我們都知道瀏覽器有一個(gè)既核心也最基本的安全功能，即同源策略。同源分別是:協(xié)議，域名，端口。如果瀏覽器訪問(wèn)服務(wù)器不同源的話，就會(huì)訪問(wèn)不到數(shù)據(jù)。那開(kāi)發(fā)中常常訪問(wèn)的服務(wù)器不同源，那么可以借助一個(gè)服務(wù)器當(dāng)做中介來(lái)訪問(wèn)需要訪問(wèn)的服務(wù)器從而獲得數(shù)據(jù)。因?yàn)橥床呗允菫g覽器的安全機(jī)制，而服務(wù)器之間是不受此限制的。之前vue-cli模板build文件夾下有dev-serve.js文件，可以在此文件中配置本地node服務(wù)器實(shí)現(xiàn)跨域，現(xiàn)在的模板下沒(méi)有此文件，那我們?cè)撊绾问褂胣ode跨域呢？不逼逼，上方法。
具體操作
1、在build文件夾下面新建一個(gè)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 = '請(qǐng)求地址'
axios.get(url, {
headers: {
//這里請(qǐng)求的是QQ音樂(lè)的接口，帶上下面參數(shù)是為了騙服務(wù)器是自己人
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中引入并且運(yùn)行只需要在最上面添加 require('./dev-serve.js')()
當(dāng)我們npm run dev運(yùn)行項(xiàng)目的時(shí)候，node服務(wù)器就會(huì)啟動(dòng)自動(dòng)監(jiān)聽(tīng)3000端口
3.本地發(fā)送ajax請(qǐng)求，就可以通過(guò)node服務(wù)器訪問(wèn)到數(shù)據(jù)，請(qǐng)求我使用的是axios。請(qǐng)求如下：
import axios from 'axios'
function getDiscList() {
const data = {
//...請(qǐng)求參數(shù)
}
return axios.get('/api/getDiscList', {
params: data
}).then(res => {
return Promise.resolve(res.data)
})
}
請(qǐng)求到數(shù)據(jù)如下：
結(jié)語(yǔ)
如此就簡(jiǎn)單實(shí)現(xiàn)了本地node服務(wù)器跨域，在開(kāi)發(fā)環(huán)境下是可以請(qǐng)求到數(shù)據(jù)，但是npm run build 打包成靜態(tài)文件后就失效了。路還很長(zhǎng)，還請(qǐng)各位不吝賜教。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解vue-cli4 配置不同開(kāi)發(fā)環(huán)境打包命令
- vue-cli開(kāi)發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法
- 使用vue-cli+webpack搭建vue開(kāi)發(fā)環(huán)境的方法
- 詳解vue-cli開(kāi)發(fā)環(huán)境跨域問(wèn)題解決方案
- Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解
- vue-cli webpack 開(kāi)發(fā)環(huán)境跨域詳解
- vue cli 3.0下配置開(kāi)發(fā)環(huán)境下的sourcemap問(wèn)題
相關(guān)文章
詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題
這篇文章主要介紹了詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
uniapp Vue3中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題
存在跨域問(wèn)題的原因是因?yàn)闉g覽器的同源策略,也就是說(shuō)前端無(wú)法直接發(fā)起跨域請(qǐng)求,同源策略是一個(gè)基礎(chǔ)的安全策略,但是這也會(huì)給uniapp/Vue開(kāi)發(fā)者在部署時(shí)帶來(lái)一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題,需要的朋友可以參考下2024-06-06
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語(yǔ)法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場(chǎng)景,感興趣的朋友一起看看吧2025-02-02
vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題
這篇文章主要介紹了vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue getter setter，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue使用路由router-view的相關(guān)知識(shí),其原理就是采用?SPA(single-page-application)?模式,就是只有一個(gè)?Web?頁(yè)面的應(yīng)用,通過(guò)?router?來(lái)控制頁(yè)面的刷新和迭代,感興趣的朋友一起看看吧2023-12-12
vue中provide?inject的響應(yīng)式監(jiān)聽(tīng)解決方案
這篇文章主要介紹了vue中provide?inject的響應(yīng)式監(jiān)聽(tīng)解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
async和await作為異步函數(shù),語(yǔ)法很簡(jiǎn)單,就是在函數(shù)前面加上async 關(guān)鍵字,來(lái)表示它是異步的,下面這篇文章主要給大家介紹了如何通過(guò)一文教會(huì)你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10