vue-cli3解决axios跨域问题

最新推荐文章于 2025-03-24 09:51:18 发布

WahFung_

最新推荐文章于 2025-03-24 09:51:18 发布

阅读量4.4k

点赞数 1

文章标签： axios vue-cli3 跨域

本文链接：https://blog.youkuaiyun.com/qq_43161149/article/details/88200091

版权

本文详细介绍了如何在Vue项目中使用Axios进行跨域请求，包括npm安装、main.js引入、配置vue.config.js以及具体使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，你要有axios。。

npm安装完后，在main.js下引入一下

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios'

//axios不支持Vue.use  可以添加原型使用
Vue.prototype.$axios = axios

由于vue-cli3，简化文件结构，所以配置文件要自己手动创建哦。

我们先创建一个文件：vue.config.js，内容为：

module.exports = {
    configureWebpack: {
        devServer: {
            proxy: {
                //名字可以自定义，这里我用的是api
                '/api': {
                  target: 'http://m.maoyan.com',//设置你调用的接口域名和端口号 别忘了加http
                  changeOrigin: true,//这里设置是否跨域
                  pathRewrite: {
                    '^/api': ''
                  }
                }
            }
        }
    },
}

配置好了，就来使用一下

created() {
        //http://m.maoyan.com/ajax/detailmovie?movieId=341139
        this.$axios.get('/api/ajax/detailmovie',{
            params:{
                movieId:341139
            }
        })
            .then(res=>{
                if(res.status===200){
                    return res.data
                }else{
                    return 'error'
                }
            })  
            .then(data=>{
                console.log(data)
            })
}

ok，以上就是解决axios跨域问题的方法和使用的方法！