解决vue-cli4跨域问题

最新推荐文章于 2021-12-30 15:54:37 发布

涤生啊

最新推荐文章于 2021-12-30 15:54:37 发布

阅读量428

点赞数

分类专栏：前端框架文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_45902401/article/details/120765683

版权

前端框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中配置vue.config.js以实现axios对API的跨域请求。通过设置`publicPath`和`devServer.proxy`，将'/api'路径代理到指定的目标URL，解决开发环境下的跨域问题。然后展示了axios使用示例，通过调用'/api'获取数据并处理响应。

摘要由CSDN通过智能技术生成

1.新建vue.config.js
在这里插入图片描述

module.exports={
    publicPath:"./", //用法和webpack本身的output.publickPath用法一致
    devServer: {
        proxy: {
            '/api': { //axios要请求的，name
                target: 'https://www.dmoe.cc/random.php?return=json', //target为目标地址
                changeOrigin: true, //开启跨域
                pathRewrite: { //重写路径
                    '^/api': '' //按照模板，name
                }
            }
        }
    }
}

2.使用

 axios.get("/api") //name
                .then(function (response) {
                    that.imgs = response.data.imgurl
                }).catch(function (err) {

            })