vue axios前端跨域配置

Vue配置前端跨域,开发笔记

因为我使用脚手架创建的vue项目,结构是这样的
根据axios配置前端跨域请求,修改vue.config.js,我看网上的教程都是在config文件夹下的index.js配置,其实都一样
首先安装axios插件,在main.js中导入

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
//引入axios
import axios from 'axios'
Vue.prototype.$http = axios
// axios.defaults.baseURL = 'http://*****/'
Vue.prototype.$http = axios

Vue.config.productionTip = false

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

如果配置跨域的话,记得吧// axios.defaults.baseURL注释掉

我的vue.config.js里面,创建默认是这样的

module.exports = {
  lintOnSave: false,
};

接下来配置跨域项,把vue.config.js修改成下面那样

module.exports = {
  lintOnSave: false,
    devServer: {
      proxy: {
          '^/api': {
            target: "http://******/", //这里后台的地址模拟的;应该填写你们真实的后台接口
              ws:true,//代理websocked
              changeOrigin:true,//虚拟的站点需要更管origin
              pathRewrite:{
                  '^/api':''//重写路径
              }
          }
      }
  }
};
//别忘了加http://

然后在调用接口的时候这样写

   worning() {
      axios.get("api/editAlarm ")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //这里的api/就代表了你config.js中的target配置路径,然后在加上需要调动的接口名就可以了
    //例如我这里的路径就时"http://******/editAlarm ,这种格式的

发起请求

配置前显示跨域
![在这里插入图片描述](https://img-blog.csdnimg.cn/f2790f7a67ec4936836015123f5d2922.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAOTYxNTUxOTcx,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

配置后:
这里的请求地址被替换成了http://localhost:8080/api/editAlarm,实际上发起的是你config.js配置的那个路径这样就成功了,如果不确定是否成功的话,就让后端配合发个请求测试一下

在这里发一篇博客记录一下开发日常,下次出现问题了就可以直接找到答案了

补充一点,昨天配的的跨域只用于开发环境,如果要在生产环境,需要后端nginx作反向代理

老夫大意了,吃了个大亏,看了这个人的文章才知道 希望这个博客可以帮助到你