【个人笔记公司项目】vue项目配置代理解决跨域问题

前后端分离模式势必会遇到跨域问题，比如我是10.106.46.169:8080要去请求10.114.46.108:9191。下面讲下代理详细步骤。

本文步骤基于本人的项目结构

一般项目结构已支持代理

// 部署时需要将改开关置为false
window.isDev = true

if (window.isDev) {  // Dev
    window.log = true
} else {  // Prod & Mock
    // 日志打印相关 可在Console中设定 window.log = true 开启打印
    window.log = false // 普通日志打印开关
}

window.server = window.isDev ? '//10.114.46.108:9292' : ''

若不支持可按照下面步骤配置：

1、文件夹api/index.js中增加baseUrl。

// api/index.js文件
// 复杂书写
import Axios from 'axios'
import { commonConfig } from '../../../config'

Axios.defaults.baseURL = commonConfig.baseUrl  // 修改为自己本地ip
Axios.defaults.timeout = commonConfig.timeout

// 简单书写
import Axios from 'axios'
import { baseUrl } from '@/config'

Axios.defaults.baseURL = baseUrl
Axios.defaults.timeout = 10000
Axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
Axios.defaults.headers['X-lr-source'] = 'wms'

此项目属于大型复杂醒目上面提到的commonConfig定义在config.js文件，大型复杂项目中用于管理全局通用配置项，书写界面需要全局配置时直接引入config.js即可。

// 是否为开发模式(发布版需改为false)
export const isDev = DV.isDev
export const isHttps = window.location.protocol === 'https:'  // 是否为HTTPS
export const BASE_ROUTE = context.baseRoute

let server, host
if (isDev) {  // Dev
    window.log = true // 普通日志打印开关
} else {  // Prod & Mock
    window.log = false
}

const unifyBase = DV.unifyServer ? DV.unifyServer : ''
export const unifyUrl = unifyBase + DV.unifyBase   // 统一架构请求路径

export const commonConfig = {
    isDev,
    unifyUrl,
    base: DV.base,
    timeout: DV.timeout,
    baseUrl: DV.server + DV.base,
    uploadUrl: `${DV.server}/api/permit/upload`,
    locale: DV.locale ? DV.locale : 'zh-CN',
    tokenPrefix: DV.tokenPrefix,
    staticBaseUrl: isDev ? '/' : DV.base,
    wsHost: `${isHttps ? 'wss' : 'ws'}:${isDev ? DV.server + DV.base : '//' + location.host + DV.base}`,
    isEnableRelease: DV.isEnableRelease,
    isEnableAttach: DV.isEnableAttach,
    isEnableCommit: DV.isEnableCommit,
    isEnableCache: DV.isEnableCache,
    localeVersion: DV.localeVersion,
    hasPortal: window.hasPortal !== undefined ?  window.hasPortal : true
}

2、config.js中定义实际要请求的后端地址。

// config.js
// 以简单书写为例
import context from '../package.json'

export const isDev = true

export const BASE = context.base
export const BASE_ROUTE = context.baseRoute

// 改为实际请求后端地址
export const baseUrl = `${isDev ? '//127.0.0.1:9191': ''}/wms/` 

3、vite.config.js增加proxy。本项目package.json中启动项"dev": "vite",，所以要配置vite代理才会生效。

//vite配置代理
export default defineConfig({
   // 其他配置
  ...... 
  // 代理配置
  server: {
  	https: true,
    proxy: {
      '/api': { // 配置需要代理的路径 --> 这里的意思是代理http://localhost:80/api/后的所有路由
        target: 'https://172.20.9.153:8085', // 目标地址 --> 服务器地址
        changeOrigin: true, // 允许跨域
        ws: true,  // 允许websocket代理
		// 重写路径 --> 作用与vue配置pathRewrite作用相同
        rewrite: (path) => path.replace(/^\/api/, "")
      }
     },
  },
});

注意：配置代理的时候’/api’如果直接写成‘ /’,这样表示http://localhost:80/后面的路由都进行代理，这样会导致你加载本地资源会出错，因为你把加载本地资源的路径全部都代理到服务端去了，浏览器会向服务器进行资源请求，这样就会导致页面报错

至此，代理配置已完成。还有vue配置代理，本项目中未用到，这里也贴出代理配置方式

// vue配置代理
module.exports = {
  // 其他配置
  ...... 
  // 代理配置
  devServer: {
    https: true, // 默认是false, 默认就是http协议，true将http协议转换为https协议
    // 代理配置
    proxy: {
      '/api': { // 配置需要代理的路径 --> 这里的意思是代理http://localhost:80/api/后的所有路由
        target: 'https://172.20.9.153:8085', // 目标地址 --> 服务器地址
        changeOrigin: true, // 允许跨域
        ws: true,  // 允许websocket代理
        // 如果这里没有进行路径重写，当你访问http://localhost:80/api/login/,实际上访问的就是https://172.20.9.153:8085/api/login/
        pathRewrite: { // 重写代理路径
          // 就是把路径中的api都替换为空的字符串
          '^/api': '', // 因为服务端地址里面是没有api字段的，api只是为了区别需要代理的路径，如果服务端有api字段则不需要重新	
        }
      }
    }
  }
}