鍍金池/ 問答/HTML/ 新版 vuejs cli webpack模板更新后的跨域請(qǐng)求問題?

新版 vuejs cli webpack模板更新后的跨域請(qǐng)求問題?

1, 以前的代碼是寫在dev-server.js里面的,現(xiàn)在那個(gè)文件不見了

2,我就把添加到dev-server的代碼,寫進(jìn)了build文件夾里面的
clipboard.png

代碼如下

    var app = express()

    var apiRoutes = express.Router()
    
    apiRoutes.get('/getDiscList', function (req, res) {
      var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
      axios.get(url, {
        headers: {
          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)
      })
    })
    
    apiRoutes.get('/lyric', function (req, res) {
      var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
    
      axios.get(url, {
        headers: {
          referer: 'https://c.y.qq.com/',
          host: 'c.y.qq.com'
        },
        params: req.query
      }).then((response) => {
        var ret = response.data
        if (typeof ret === 'string') {
          var reg = /^\w+\(({[^()]+})\)$/
          var matches = ret.match(reg)
          if (matches) {
            ret = JSON.parse(matches[1])
          }
        }
        res.json(ret)
      }).catch((e) => {
        console.log(e)
      })
    })
    
app.use('/api', apiRoutes)

出現(xiàn)的情況是這樣的:以前有dev-server的版本

clipboard.png

現(xiàn)在最新的版本

clipboard.png

請(qǐng)求到的參數(shù)、地址都是一樣的,但是

clipboard.png

clipboard.png

新版本的是webpack_hmr 現(xiàn)在的是 info?t=....

舊版的請(qǐng)求地址返回的數(shù)據(jù)是json數(shù)據(jù),而新版的根本就找不到?。?請(qǐng)幫我解決一下,謝謝了

回答
編輯回答
悶油瓶

需要找一個(gè)proxy代理或者node 里面的 express的api來代理

    import axios from 'axios'
    import qs from 'qs'
    
    // axios 配置
    axios.defaults.timeout = 10000;
    axios.defaults.baseURL = 'http://localhost:3000';
    
    export function fetchGet(url, param) {
        return new Promise((resolve, reject) => {
            axios.get(url, {params: param})
                .then(response => {
                    resolve(response.data)
                }, err => {
                    reject(err)
                })
                .catch((error) => {
                    reject(error)
                })
        })
    }
    export default {
        /**
         * 用戶登錄
         */
        Login(params) {
            return fetchGet('/login', params)
        },
    
         /**
         * popularmusic列表
         */
         PopularList() {
             return fetchGet('/playlist/detail', {id: 3778678})
         },
    
         /**
         * classicalmusic列表
         */
         ClassicalList() {
             return fetchGet('/playlist/detail', {id: 71384707})
         },
    
         /**
         * lightmusic列表
         */
         LightList() {
             return fetchGet('/playlist/detail', {id: 26467411})
         },
    
         /**
         * radiomusic列表
         */
         RadioList() {
             return fetchGet('/playlist/detail', {id: 897089})
         },
    
         /**
          * music歌詞
          */
          MusicUrl(id) {
            return fetchGet('/music/url', {id})
          },
    
         /**
          * music歌詞
          */
          MusicLyric(id) {
            return fetchGet('/lyric', id)
          },
    
          /**
          * music搜索
          */
          MusicSearch(keywords) {
            return fetchGet('/search', {keywords})
          },
    
          /**
          * 排行榜
          */
          MusicRank(idx) {
            return fetchGet('/top/list', {idx})
          },
    
    }
    

https://github.com/hzzly/Magi...

2018年7月15日 15:07