在新建项目中使用proxy进行反向代理解决跨域

一、安装axios

通过指令-- npm install axios -- 安装axios在src路径下创建一个名称为“http”的文件夹，文件夹下创建一个名为“index.js”。

index.js内代码如下：

import axios from "axios";

//设置根路径并用http接收
const http = axios.create({
    baseURL: 'http://www.chenfuguo.cn:3000',
})

//把http暴露出去
export default http

在main.js中引入axios

代码入下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import http from './http/index.js' //导入axios

Vue.config.productionTip = false
Vue.prototype.$http = http //使用axios，挂载到vue上

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

在根路径创建一个新的文件夹

vue.config.js代码如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.chenfuguo.cn:3000', // 需要跨域的目标网址
                changeOrigin: true,
                pathRewrite: { //路径重写
                    '^/api': ''
                }
            }
        }
    }
}

因为用“/api”接收根路径所以需要把index.js内的根路径进行修改

import axios from "axios";

const http = axios.create({
    // baseURL: 'http://www.chenfuguo.cn:3000',
    baseURL: '/api',
})

export default http

完成，解决跨域

需要重新启动项目才会生效