VUE(2.6.10) VUE-AXIOS(2.1.5) VUE-CLI (4.1.0) 解决跨域问题_vue2.6.10对应的less-loader版本是多少-CSDN博客

本文链接：https://blog.csdn.net/weixin_38045214/article/details/122171821

本文介绍了在Vue(2.6.10)、Vue-Axios(2.1.5)和Vue-CLI(4.1.0)环境下，如何配置vue.config.js以实现本地开发时的跨域请求。主要步骤包括在main.js中设置axios的默认基地址，以及在vue.config.js中配置devServer的proxy选项，将'/apis'路径代理到'http://localhost:80'，确保API调用成功。

摘要由CSDN通过智能技术生成

VUE(2.6.10) VUE-AXIOS(2.1.5) VUE-CLI (4.1.0) 解决跨域问题

1、package.json

  "dependencies": {
    "axios": "^0.19.0",
    "cropperjs": "^1.5.6",
    "highcharts": "^8.0.4",
    "http-vue-loader": "^1.4.1",
    "iview": "^3.5.4",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "qs": "^6.9.1",
    "view-design": "^4.0.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.5",
    "vue-image-upload-preview": "^1.0.2",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.12"
  },

2、main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './routers'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import axios from 'axios'

Vue.use(VueRouter)
Vue.use(Vuetify)
Vue.config.productionTip = false

Vue.prototype.$axios = axios
axios.defaults.baseURL = '/apis' //必须加这段

const router = new VueRouter({
    mode: 'history',
    routes: routers
})

const opts = {}
export default new Vuetify(opts)


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

3、创建vue.config.js

在这里插入图片描述

4、配置代理

module.exports = {
    //devServer.proxy适用于本地开发使用，
    //生成环境请用第三方代理软件，如nginx。
    devServer: {
        port: 8081, //本机端口号
        host: "localhost", //本机主机名
        https: false, //协议
        open: true, //启动服务器时自动打开浏览器访问
        proxy: {
            '/apis': {
                //目标服务器,代理访问到http://localhost:80
                target: "http://localhost:80",
                changOrigin: true, //开启代理
                pathRewrite: {
                    '^/apis': ''
                }
            }
        }
    }
}