今天仍然在學習Vue，出現了一個我意料之中的問題：請求跨域問題
我想通過主機來訪問豆瓣里面的json資料
首先按照python爬蟲的思想，我掏了一個豆瓣json資料的url地址資訊及引數
① 基本url： https://movie.douban.com/j/search_subjects
②請求引數如下：
type:‘movie’,
tag:‘熱門’,
page_limit:50,
page_start:0
二話不說開始用axios進行資料請求，
那么如果沒有axiso，請先下載
npm i axios
App.Vue的代碼如下
<template>
<button @click="getData">axios獲取請求</button>
</template>
<script>
import axios from 'axios';
// 聯系網址：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('請求成功',res)
})
.catch(err => {
console.error('請求失敗',err);
})
}
},
}
</script>
<style>
</style>
同時在vue.config,js里面配置代理服務器
module.exports = {
pages:{
index:{
//程式的入口
entry:'src/main.js',
},
},
lintOnSave:false, //關閉語法檢查
// 開啟一個Vue的代服務器，后面埠視自己請求的埠修改
// devServer: {
// proxy: 'https://movie.douban.com'
// }
/**
* 1、/ysj 是加到實際請求的埠后面
*
* 2、而在實際請求中，瀏覽器請求發給代理服務器
* ，代理服務器也會攜帶/ysj內容，這樣子無法獲取資料
* ，所以用正則運算式將/ysj拿掉，也就是pathRewrite
*
* 3、ws是webSocket的簡寫，默認是true
*
* 4、changeOrigin為true代表當代理服務器給目標服務器發送請求時
* ，給出的與目標服務器一致的埠號， 防止目標服務器攔截我的請求
*/
devServer: {
proxy: {
'/ysj': {
target: 'https://movie.douban.com',
pathRewrite:{'^/ysj':''},
// ws: true,
changeOrigin: true
},
}
}
}
最后由于寫了pathRewrite進行了代理服務器到目標服務器路徑的整理，請求成功了
解決了跨域問題！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/292529.html
標籤：其他
上一篇：iOS多執行緒概念總結