您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“新版vue-cli模板下本地開(kāi)發(fā)環(huán)境如何使用node服務(wù)器跨域”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“新版vue-cli模板下本地開(kāi)發(fā)環(huán)境如何使用node服務(wù)器跨域”這篇文章吧。
背景
我們都知道瀏覽器有一個(gè)既核心也最基本的安全功能,即同源策略。同源分別是:協(xié)議,域名,端口。如果瀏覽器訪(fǎng)問(wèn)服務(wù)器不同源的話(huà),就會(huì)訪(fǎng)問(wèn)不到數(shù)據(jù)。那開(kāi)發(fā)中常常訪(fǎng)問(wèn)的服務(wù)器不同源,那么可以借助一個(gè)服務(wù)器當(dāng)做中介來(lái)訪(fǎng)問(wèn)需要訪(fǎng)問(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ù)器訪(fǎng)問(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ù)如下:
以上是“新版vue-cli模板下本地開(kāi)發(fā)環(huán)境如何使用node服務(wù)器跨域”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。