vite配置正向代理服务器

---

前言

由于浏览器的限制，浏览器不允许向不同的域名发送请求。
目前解决方法有四个：
1前端配置正向代理服务器（本文使用vite配置）

https://cn.vitejs.dev/config/server-options.html#server-proxy

2后端配置反向代理服务器（比如使用nginx）
3后端配置运行跨域（比如express允许跨域配置

app.use(cors());

4使用jsonp，配置回调函数

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=silly&sge=20"></script>
<script>
	function success(data){
        console.log("获取到数据");
        console.log(data)
    }
</script>

只有第一种方式前端可以独立解决，后面三种方式都需要后端配合。

配置步骤

在src同级文件夹下新建.env.development与.env.production文件，为vite的环境变量。

# 只在指定模式（development）下加载

# base api, 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理
VITE_BASE_API = '/api'

更改接口地址为相对地址

import axios from 'axios'
//更改接口地址为相对地址
const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    return config // 必须返回配置
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const { success, message, data } = response.data
    //   要根据success的成功与否决定下面的操作
    if (success) {
      return data
    } else {
      $message('warn', message)
      // TODO：业务错误
      return Promise.reject(new Error(message))
    }
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default service

在与src的同级文件夹下创建vite.config.js并配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { join } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
 
  // 代理
  server: {
    proxy: {
      // 代理所有 /api 的请求，该求情将被代理到 target 中
      '/api': {
        // 代理请求之后的请求地址（你的真实接口地址)
        target: 'xxx',
        // 跨域
        changeOrigin: true
      }
    }
  }
})

注意：一定要是相对，这样vite才会判断，最终会转发到目标地址（target地址）
重启服务（注意，一定要重启服务，vite配置文件才能生效）