Vue-cli集成axios請(qǐng)求出現(xiàn)CORS跨域問題及解決

更新時(shí)間：2023年10月10日 11:34:48 作者：凌晨小街

這篇文章主要介紹了Vue-cli集成axios請(qǐng)求出現(xiàn)CORS跨域問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,

Vue-cli集成axios請(qǐng)求出現(xiàn)CORS跨域問題

今天仍然在學(xué)習(xí)Vue，出現(xiàn)了一個(gè)我意料之中的問題

請(qǐng)求跨域問題

我想通過主機(jī)來訪問豆瓣里面的json數(shù)據(jù)

首先按照python爬蟲的思想，我掏了一個(gè)豆瓣json數(shù)據(jù)的url地址信息及參數(shù)

① 基本url： https://movie.douban.com/j/search_subjects

②請(qǐng)求參數(shù)如下：

type:‘movie’,
tag:‘熱門’,
page_limit:50,
page_start:0

二話不說開始用axios進(jìn)行數(shù)據(jù)請(qǐng)求，

那么如果沒有axiso，請(qǐng)先下載

npm i axios

App.Vue的代碼如下

<template>
    <button @click="getData">axios獲取請(qǐng)求</button>
</template>
<script>
import axios from 'axios';
// 聯(lián)系網(wǎng)址：https://movie.douban.com/j/chart/top_list?type=5&interval_id=100%3A90&action=&start=0&limit=20
export default {
    methods: {
        getData(){
            axios.get('/ysj/j/search_subjects'
              ,{
                params:{
                    type:'movie',
                    tag:'熱門',
                    page_limit:50,
                    page_start:0
                }
              }
              )
            .then(res => {
                console.log('請(qǐng)求成功',res)
            })
            .catch(err => {
                console.error('請(qǐng)求失敗',err); 
            })
        }
    },
}
</script>
<style>
</style>

同時(shí)在vue.config,js里面配置代理服務(wù)器

module.exports = {
    pages:{
        index:{
            //程序的入口
            entry:'src/main.js',
        },
    },
    lintOnSave:false,  //關(guān)閉語法檢查
    // 開啟一個(gè)Vue的代服務(wù)器，后面端口視自己請(qǐng)求的端口修改
    // devServer: {
    //     proxy: 'https://movie.douban.com'
    // }
    /**
     * 1、/ysj 是加到實(shí)際請(qǐng)求的端口后面
     * 
     * 2、而在實(shí)際請(qǐng)求中，瀏覽器請(qǐng)求發(fā)給代理服務(wù)器
     * ，代理服務(wù)器也會(huì)攜帶/ysj內(nèi)容，這樣子無法獲取數(shù)據(jù)
     * ，所以用正則表達(dá)式將/ysj拿掉，也就是pathRewrite
     * 
     * 3、ws是webSocket的簡(jiǎn)寫，默認(rèn)是true
     * 
     * 4、changeOrigin為true代表當(dāng)代理服務(wù)器給目標(biāo)服務(wù)器發(fā)送請(qǐng)求時(shí)
     * ，給出的與目標(biāo)服務(wù)器一致的端口號(hào)， 防止目標(biāo)服務(wù)器攔截我的請(qǐng)求
     */
    devServer: {
        proxy: {
          '/ysj': {
            target: 'https://movie.douban.com',
            pathRewrite:{'^/ysj':''},
            // ws: true,
            changeOrigin: true
          },
        }
      }
}

最后由于寫了pathRewrite進(jìn)行了代理服務(wù)器到目標(biāo)服務(wù)器路徑的整理，請(qǐng)求成功了