Vue 3.0 axios解决跨域问题

1.跨域错误提示

**2.安装 **

安装 Axios ：

 npm install axios -S
1

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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':''
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

6.效果展示