[JavaScript知识库]vue3 axios解决跨域问题

在package.json同级目录下新建文件名字(文件名字必须为这个)为vue.config.js

vue.config.js的内容为

module.exports = {
  devServer:{
    host:'localhost',
    port:8080,
    proxy:{
      '/api':{
        target:'http://localhost:xxxx,     //你想访问的服务器地址
        changeOrigin:true,
        pathRewrite:{
          '/api':''
        }
      }
    }
  },
}

预先安装好axios，安装命令为 npm install axios --save

在main.js 中添加如下代码

import axios from 'axios'
Vue.prototype.axios = axios;
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type']='application/json'  

这样就可以跨域访问了，访问时不需要写完整的接口地址

axios.get('/user/register')  //接口名字
   .then((res) => {
      alert(res);
    })
   .catch(err => {
      alert(err.msg);
})