亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2018年04月03日 14:50:17   作者：RobertChiao  
這篇文章主要介紹了新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

背景

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

3.本地發(fā)送ajax請(qǐng)求，就可以通過node服務(wù)器訪問到數(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é)語

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

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

相關(guān)文章

最新評(píng)論