Vue 3.0 axios解决跨域问题

最新推荐文章于 2024-07-03 14:16:48 发布

weixin_50027754

最新推荐文章于 2024-07-03 14:16:48 发布

阅读量643

点赞数

分类专栏：教程文章标签：前端

本文链接：https://blog.csdn.net/weixin_50027754/article/details/115056875

版权

教程专栏收录该内容

111 篇文章 0 订阅

订阅专栏

1.跨域错误提示
在这里插入图片描述
**2.安装 **

安装 Axios ：

 npm install axios -S

3.在min.js中进行如下配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.prototype.$axios = axios;

axios.defaults.baseURL='/api'
axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.在项目根目录下创建vue.config.js文件

在这里插入图片描述
5.在vue.config.js中进行如下配置

module.exports={
    outputDir:'dist',
    assetsDir:'assets',
    lintOnSave:false,
    devServer:{
        open:true,
      
        https:false,
        hotOnly:false,  
        port:'8081', 
        host:"localhost",
        proxy:{
            '/api':{
                target:'http://t.yushu.im/v2/movie',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

注：我这里用的是豆瓣的接口，按需求填

6.效果展示
在这里插入图片描述