vue三十一：vue配置反向代理

 

由於前端包本身已經被映射為了域名的形式，所以直接請求后端接口，會報跨域的問題

貓眼接口：https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=B7C0C9B0DC9E11EABDF83B2B19B81E94EBA03A3B4D5A47A39FFC3F36CCA46F06&optimus_risk_level=71&optimus_code=10

 

由於請求后端需要發起網絡請求，安裝axios庫：cnpm install --save axios

 

調用接口

導入axios庫

請求接口

 

報跨域問題

 

解決方案：配置反向代理

官方配置說明：https://cli.vuejs.org/zh/config/

 

 在package.json所在的同級目錄下，創建vue.config.js文件，寫入配置反向代理

 

請求代碼中，去掉域名

 

請求，還是不行

 

 解決方法，只要改了配置文件，一定要重啟服務器

 

mounted

mounted() {
    axios.get(
        // 'https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=B7C0C9B0DC9E11EABDF83B2B19B81E94EBA03A3B4D5A47A39FFC3F36CCA46F06&optimus_risk_level=71&optimus_code=10'
        '/ajax/movieOnInfoList?token=&optimus_uuid=B7C0C9B0DC9E11EABDF83B2B19B81E94EBA03A3B4D5A47A39FFC3F36CCA46F06&optimus_risk_level=71&optimus_code=10'
    ).then(res => {
        console.log(res.data)
    })
}

vue.config.js

module.exports = {
    devServer: {
        // 配置反向代理
        proxy: {
            '/ajax': {  // 以/ajax開頭的請求
                target: 'https://m.maoyan.com',  // 以/ajax開頭的請求，全部代理到https://m.maoyan.com上
                // ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    }
}