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>'
            }
        }
    }
}