V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yuan321
V2EX  ›  Vue.js

为啥 vite 配置了代理,却并没有走代理地址?

  •  
  •   yuan321 · 2023-02-21 15:47:18 +08:00 · 2001 次点击
    这是一个创建于 402 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vite.config.js

    import { ConfigEnv, UserConfig, loadEnv } from 'vite';
    import { viteMockServe } from 'vite-plugin-mock';
    import vue from '@vitejs/plugin-vue';
    import vueJsx from '@vitejs/plugin-vue-jsx';
    import svgLoader from 'vite-svg-loader';
    
    import path from 'path';
    
    const CWD = process.cwd();
    
    // https://vitejs.dev/config/
    export default ({ mode }: ConfigEnv): UserConfig => {
      const { VITE_BASE_URL } = loadEnv(mode, CWD);
      return {
        base: VITE_BASE_URL,
        resolve: {
          alias: {
            '@': path.resolve(__dirname, './src'),
          },
        },
    
        css: {
          preprocessorOptions: {
            less: {
              modifyVars: {
                hack: `true; @import (reference) "${path.resolve('src/style/variables.less')}";`,
              },
              math: 'strict',
              javascriptEnabled: true,
            },
          },
        },
    
        plugins: [
          vue(),
          vueJsx(),
          viteMockServe({
            mockPath: 'mock',
            localEnabled: true,
          }),
          svgLoader(),
        ],
    
        server: {
    
          port: 3002,
          proxy: {
            '/api': {
              target: "http://130.124.200.10:1000",
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, '')
            }
          }
    
    
    
        },
      };
    };
    

    封装的 axios

    // axios 配置  可自行根据项目进行更改,只需更改该文件即可,其他文件可以不动
    import isString from 'lodash/isString';
    import merge from 'lodash/merge';
    import type { InternalAxiosRequestConfig } from 'axios';
    import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
    import { VAxios } from './Axios';
    import proxy from '@/config/proxy';
    import { joinTimestamp, formatRequestDate, setObjToUrlParams } from './utils';
    import { TOKEN_NAME } from '@/config/global';
    import { ContentTypeEnum } from '@/constants';
    
    const env = import.meta.env.MODE || 'development';
    
    
    // 如果是 mock 模式 或 没启用直连代理 就不配置 host 会走本地 Mock 拦截 或 Vite 代理
    let host = env === 'mock' || !proxy.isRequestProxy ? '' : proxy[env].host;
    
    
    // 数据处理,方便区分多种处理方式
    const transform: AxiosTransform = {
      // 处理请求数据。如果数据不是预期格式,可直接抛出错误
      transformRequestHook: (res, options) => {
        const { isTransformResponse, isReturnNativeResponse } = options;
    
        // 如果 204 无内容直接返回
        const method = res.config.method?.toLowerCase();
        if (res.status === 204 || method === 'put' || method === 'patch') {
          return res;
        }
    
        // 是否返回原生响应头 比如:需要获取响应头时使用该属性
        if (isReturnNativeResponse) {
          return res;
        }
        // 不进行任何处理,直接返回
        // 用于页面代码可能需要直接获取 code ,data ,message 这些信息时开启
        if (!isTransformResponse) {
          return res.data;
        }
    
        // 错误的时候返回
        const { data } = res;
        if (!data) {
          throw new Error('请求接口错误');
        }
    
        //  这里 code 为 后台统一的字段,需要在 types.ts 内修改为项目自己的接口返回格式
        const { code } = data;
    
        // 这里逻辑可以根据项目进行修改
        const hasSuccess = data && code === 0;
        if (hasSuccess) {
          return data.data;
        }
    
        throw new Error(`请求接口错误, 错误码: ${code}`);
      },
    
      // 请求前处理配置
      beforeRequestHook: (config, options) => {
        const { apiUrl, isJoinPrefix, urlPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
    
        // 添加接口前缀
        if (isJoinPrefix && urlPrefix && isString(urlPrefix)) {
          config.url = `${urlPrefix}${config.url}`;
        }
    
        // 将 baseUrl 拼接
        if (apiUrl && isString(apiUrl)) {
          config.url = `${apiUrl}${config.url}`;
        }
        const params = config.params || {};
        const data = config.data || false;
    
        if (formatDate && data && !isString(data)) {
          formatRequestDate(data);
        }
        if (config.method?.toUpperCase() === 'GET') {
          if (!isString(params)) {
            // 给 get 请求加上时间戳参数,避免从缓存中拿数据。
            config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
          } else {
            // 兼容 restful 风格
            config.url = `${config.url + params}${joinTimestamp(joinTime, true)}`;
            config.params = undefined;
          }
        } else if (!isString(params)) {
          if (formatDate) {
            formatRequestDate(params);
          }
          if (
            Reflect.has(config, 'data') &&
            config.data &&
            (Object.keys(config.data).length > 0 || data instanceof FormData)
          ) {
            config.data = data;
            config.params = params;
          } else {
            // 非 GET 请求如果没有提供 data ,则将 params 视为 data
            config.data = params;
            config.params = undefined;
          }
          if (joinParamsToUrl) {
            config.url = setObjToUrlParams(config.url as string, { ...config.params, ...config.data });
          }
        } else {
          // 兼容 restful 风格
          config.url += params;
          config.params = undefined;
        }
        return config;
      },
    
      // 请求拦截器处理
      requestInterceptors: (config, options) => {
        // 请求之前处理 config
        const token = localStorage.getItem(TOKEN_NAME);
        if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
          // jwt token
          (config as Recordable).headers.Authorization = options.authenticationScheme
            ? `${options.authenticationScheme} ${token}`
            : token;
        }
        return config as InternalAxiosRequestConfig;
      },
    
      // 响应拦截器处理
      responseInterceptors: (res) => {
        return res;
      },
    
      // 响应错误处理
      responseInterceptorsCatch: (error: any) => {
        const { config } = error;
        if (!config || !config.requestOptions.retry) return Promise.reject(error);
    
        config.retryCount = config.retryCount || 0;
    
        if (config.retryCount >= config.requestOptions.retry.count) return Promise.reject(error);
    
        config.retryCount += 1;
    
        const backoff = new Promise((resolve) => {
          setTimeout(() => {
            resolve(config);
          }, config.requestOptions.retry.delay || 1);
        });
        config.headers = { ...config.headers, 'Content-Type': ContentTypeEnum.Json };
        return backoff.then((config) => request.request(config));
      },
    };
    
    function createAxios(opt?: Partial<CreateAxiosOptions>) {
      return new VAxios(
        merge(
          <CreateAxiosOptions>{
            // https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
            // 例如: authenticationScheme: 'Bearer'
            authenticationScheme: '',
            // 超时
            timeout: 10 * 1000,
            // 携带 Cookie
            withCredentials: true,
            // 头信息
            headers: { 'Content-Type': ContentTypeEnum.Json },
            // 数据处理方式
            transform,
            // 配置项,下面的选项都可以在独立的接口请求中覆盖
            requestOptions: {
              // 接口地址
              apiUrl: host,
              // 是否自动添加接口前缀
              isJoinPrefix: true,
              // 接口前缀
              // 例如: https://www.baidu.com/api
              // urlPrefix: '/api'
              urlPrefix: '/api',
              // 是否返回原生响应头 比如:需要获取响应头时使用该属性
              isReturnNativeResponse: false,
              // 需要对返回数据进行处理
              isTransformResponse: true,
              // post 请求的时候添加参数到 url
              joinParamsToUrl: false,
              // 格式化提交参数时间
              formatDate: true,
              // 是否加入时间戳
              joinTime: true,
              // 忽略重复请求
              ignoreRepeatRequest: true,
              // 是否携带 token
              withToken: true,
              // 重试
              retry: {
                count: 3,
                delay: 1000,
              },
            },
          },
          opt || {},
        ),
      );
    }
    export const request = createAxios();
    
    

    配置地址

    export default {
      isRequestProxy: true,
      development: {
        // 开发环境接口请求
        // host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
        host: 'http://130.124.200.10:1000',
        // 开发环境 cdn 路径
        cdn: '',
      },
      test: {
        // 测试环境接口地址
        host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
        // 测试环境 cdn 路径
        cdn: '',
      },
      release: {
        // 正式环境接口地址
        host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
        // 正式环境 cdn 路径
        cdn: '',
      },
      site: {
        // TDesign 部署特殊需要 与 release 功能一致
        host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
        // 正式环境 cdn 路径
        cdn: '',
      },
    };
    
    

    开发模式没有走代理,显示跨域

    8 条回复    2023-02-21 20:33:54 +08:00
    actar
        1
    actar  
       2023-02-21 15:50:22 +08:00   ❤️ 1
    development: {
    // 开发环境接口请求
    host: '/api',
    // 开发环境 cdn 路径
    cdn: '',
    }
    estk
        2
    estk  
       2023-02-21 15:50:31 +08:00 via iPhone
    Clash 开始增强模式,所有命令行都走它流量,其它软件不太懂
    296727
        3
    296727  
       2023-02-21 15:51:07 +08:00   ❤️ 2
    你试试访问 IP:port/api ,是不是可以访问
    那是不是你把请求地址写死了
    都写死了为什么还会走代理
    yuan321
        4
    yuan321  
    OP
       2023-02-21 15:57:52 +08:00
    @actar 可以了谢谢。不过很奇怪 我注释的腾讯的地址 https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com 跨域也不报错,应该是他们后端做了允许跨域的,但是我们的后端用 koa 开发的也做了跨域处理的,但是死活都报跨域错误。。。。
    actar
        5
    actar  
       2023-02-21 16:07:29 +08:00
    @yuan321 你的配置里面 withCredentials 为 true ,那么就应该注意 跨域接口的响应头 Access-Control-Allow-Origin 的值就不能为 * ,你可以检查一下
    yuan321
        6
    yuan321  
    OP
       2023-02-21 16:19:56 +08:00
    @actar 果然如此,当我把 withCredentials 改为 false 的时候,我直接请求服务器的地址,就算不用代理,也不报跨域的错误了。学到了这个 withCredentials 的知识了,原来这个需要后端返回 Access-Control-Allow-Origin 的值应该为域名才行。难怪之前怎么做都报跨域错误的,谢谢你,👍
    yuan321
        7
    yuan321  
    OP
       2023-02-21 16:36:11 +08:00
    @actar 我们在 koa 后端添加了如下跨域设置但是还是报跨域错误。``` app.use(async (ctx, next)=> {
    console.log(ctx.request.header.origin)
    ctx.set('Access-Control-Allow-Origin', ctx.request.header.origin);
    if (ctx.method == 'OPTIONS') {
    ctx.body = 200;
    } else {
    await next();
    }
    });```
    actar
        8
    actar  
       2023-02-21 20:33:54 +08:00
    @yuan321 这个响应头也需要配置的 Access-Control-Allow-Methods ,可以检查一下。
    Access-Control-Allow-Methods=GET,HEAD,PUT,POST,DELETE,PATCH

    你用的 koa ,官方提供了一个 cors 的中间件 https://github.com/koajs/cors ,你们跨域用的中间件还是自己写的啊。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2773 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 12:29 · PVG 20:29 · LAX 05:29 · JFK 08:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.