今天使用 vue-cli搭建项目，在配置跨域的地方踩了个坑，记录一下

vue 项目结构如下：

.env.development 文件

NODE_ENV=development
VUE_APP_PORT = 8098
VUE_APP_BASE_URL = 'http://localhost:8080'
# 是否开启代理
VUE_APP_PROXY = true

vue.config.js 文件

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  devServer: {
    // allowedHosts: 'all',
    // open: false, //运行后自动打开浏览器
    // port: process.env.VUE_APP_PORT, //挂载端口
    proxy: {
    //这里的'/api' 表示，前端代理，需要去拦截带了什么路径的请求，这里，但是实际情况是：后端大家基本上没有使用api 去做接口的打头
      '/api': {
      //这里表示，拦截到对应的请求之后，需要将域名改为什么
        target: process.env.VUE_APP_BASE_URL,
        // ws: true,
        //这里表示开启跨域
        changeOrigin:true,
        //这里表示我将拦截到的 url 中，带有 api 字样的路径，重写成空字符串
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
})

后端接口代码

@RestController
//注意看，我这里不是 api 打头的，那为啥前端还拦截这个 api 呢？继续看！
@RequestMapping("/index")
public class IndexController {

    @GetMapping("/getBannerInfo")
    public BannerInfoVO getBannerInfo() {
        return BannerInfoVO.builder().globalTitle("12345").smallTitle("54321").build();
    }

}

api中的 index.js

// api.js

import axios from 'axios';

const instance = axios.create({
  //baseURL: process.env.VUE_APP_BASE_URL, 
  // 后端API的基本URL，记住了，这里在开发环境的时候，
  //可以不配置，因为在 vue.config.js里面已经配置了 target 了，
  //我尼玛！！！就是这里，我在网上找的这个已封装好的 index.js，
  //它里面是直接写的：baseURL: process.env.VUE_APP_BASE_UR，就相当于，
  //一个请求发起的时候，会自动加上VUE_APP_BASE_UR，也就是我们配置的后端域名：http://localhost:8080，
  //好的，它加上了之后，实际请求的接口全路径就变成了：
  //http://localhost:8080/+接口路径，根本没有触发代理！！！
  //所以，改成下面的就好了，如果是开发环境，就把 baseUrl 设置为：'/api'，这样就可以去触发咱设置的代理了，555555
  baseURL: process.env.NODE_ENV === 'development' && process.env.VUE_APP_PROXY === 'true' ? "/api" : process.env.VUE_APP_API_BASEURL,
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前可以添加请求头或进行其他操作
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在响应数据之前可以进行全局处理
    return response.data;
  },
  (error) => {
    // 处理错误响应
    return Promise.reject(error);
  }
);

export default instance;

如何使用？

image-1696507035784