怎么配置代理服务器, 解决跨域问题

1. 在vue.config.js​​里面

const { defineConfig } = require('@vue/cli-service'); 
module.exports = defineConfig({
  devServer: {
    proxy: {
      api: {
        target: 'http://xxx.cn/',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
});

或者是在vite.config.js​里面

import { defineConfig } from 'vite'
export default defineConfig({
  server:{
    proxy:{
      '/api': {
        target: 'http://xxx.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

2. 引入axios实例, 配置请求和响应拦截器(一般在src文件夹下面的utils文件夹里面)

import axios from 'axios';
import nProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 创建axios实例
const request = axios.create({
  // 发送请求到目标服务器前会将baseURL自动拼接到请求路径前面
  baseURL: '/api',
  // 每条并发的最大等待时间,时间到了返回404
  timeout: 10000,
});

// 创建请求拦截器
// 会在axios请求发送之前拦截
request.interceptors.request.use((config) => {
  nProgress.start();  
  // 添加请求头的信息
  config.headers.aaa = 123;
  // 一定要写return config
  return config;
});

// 创建响应拦截器
// 会在响应返回到浏览器之后触发
// 第一个回调是请求成功的回调
// 第二个回调是请求失败的回调
request.interceptors.response.use(
  (response) => {
    //  根据状态码不同的处理
    if (response.data.code === 200) {
      nProgress.done();
      return response.data;
    }  else {
      nProgress.done();
      return Promise.reject(response.data.message);
    }
  },
  () => {
    nProgress.done();
    return Promise.reject('请求失败');
  }
);
export default request;