背景

我們都知道瀏覽器有一個既核心也最基本的安全功能，即同源策略。同源分別是:協(xié)議，域名，端口。如果瀏覽器訪問服務(wù)器不同源的話，就會訪問不到數(shù)據(jù)。那開發(fā)中常常訪問的服務(wù)器不同源，那么可以借助一個服務(wù)器當(dāng)做中介來訪問需要訪問的服務(wù)器從而獲得數(shù)據(jù)。因為同源策略是瀏覽器的安全機制，而服務(wù)器之間是不受此限制的。之前vue-cli模板build文件夾下有dev-serve.js文件，可以在此文件中配置本地node服務(wù)器實現(xiàn)跨域，現(xiàn)在的模板下沒有此文件，那我們該如何使用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音樂的接口，帶上下面參數(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中引入并且運行只需要在最上面添加 require('./dev-serve.js')()

當(dāng)我們npm run dev運行項目的時候，node服務(wù)器就會啟動自動監(jiān)聽3000端口

3.本地發(fā)送ajax請求，就可以通過node服務(wù)器訪問到數(shù)據(jù)，請求我使用的是axios。請求如下：

import axios from 'axios'

function getDiscList() {

const data = {

//...請求參數(shù)

}

return axios.get('/api/getDiscList', {

params: data

}).then(res => {

return Promise.resolve(res.data)

})

}

請求到數(shù)據(jù)如下：

結(jié)語

如此就簡單實現(xiàn)了本地node服務(wù)器跨域，在開發(fā)環(huán)境下是可以請求到數(shù)據(jù)，但是npm run build 打包成靜態(tài)文件后就失效了。路還很長，還請各位不吝賜教。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。