快捷導(dǎo)航

新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法

更新時間：2018年04月03日 14:50:17 作者：RobertChiao

這篇文章主要介紹了新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

背景

我們都知道瀏覽器有一個既核心也最基本的安全功能，即同源策略。同源分別是:協(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue watch監(jiān)聽對象及對應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue獲取頁面元素的相對位置的方法示例
這篇文章主要介紹了Vue獲取頁面元素的相對位置的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Vue中實現(xiàn)在線畫流程圖的方法
最近在調(diào)研一些在線文檔的實現(xiàn),包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等,本文分享在Vue框架下基于metaeditor-mxgraph實現(xiàn)在線流程圖,感興趣的朋友一起看看吧
2024-07-07
vue中使用[provide/inject]實現(xiàn)頁面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實現(xiàn)頁面reload的方法，文中給大家提到了在vue中實現(xiàn)頁面刷新不同的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目
后臺管理系統(tǒng)是我們?nèi)粘ｉ_發(fā)學(xué)習(xí)經(jīng)常遇到的一個項目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
Vue項目部署上線全過程記錄(保姆級教程)
vue項目開發(fā)完畢后,我們需要將項目打包上線,同時我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項目,下面這篇文章主要給大家介紹了關(guān)于Vue項目部署上線的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue實現(xiàn)百度搜索下拉提示功能實例
這篇文章主要介紹了vue實現(xiàn)百度搜索下拉提示功能實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
vue實現(xiàn)對highlight-current-row方式整行選中后修改默認背景顏色
這篇文章主要介紹了vue實現(xiàn)對highlight-current-row方式整行選中后修改默認背景顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
這篇文章主要介紹了vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
使用ElementUI修改el-tabs標(biāo)簽頁組件樣式
這篇文章主要介紹了使用ElementUI修改el-tabs標(biāo)簽頁組件樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08