Merge pull request #86 from dsgler/betterDevEx

feat: 更好的开发体验，现在可以直接在localhost打开，而不用处理跨域问题，具体原理详见改动

Author: dsgler

.env

@@ -0,0 +1 @@
+VITE_HR_DOMAIN_BE=https://dev.back.recruitment2023.hustunique.com

.env.development

@@ -0,0 +1 @@
+VITE_HR_DOMAIN_BE=/api

config/vite.config.dev.ts

@@ -1,21 +1,38 @@
 import { mergeConfig, UserConfig } from 'vite';
 import baseConfig from './vite.config.base';
 
-export default mergeConfig(
-  {
-    server: {
-      proxy: {
-        '^/api': {
-          target: 'https://dev.back.recruitment2023.hustunique.com',
-          changeOrigin: true,
-          credentials: 'include',
-          rewrite: (path) => path.replace(/^\/api/, ''),
-          cookieDomainRewrite: {
-            '*': 'hustunique.com',
-          },
+const devConfig: UserConfig = {
+  server: {
+    proxy: {
+      // 将 src/constants/index.ts 中的 SERVER_DOMAIN 改为 "/api"
+      // 通过代理解决本地调试跨域问题
+      '^/api': {
+        target: 'https://dev.back.recruitment2023.hustunique.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+        cookieDomainRewrite: {
+          // 返回的 cookie 的 domain 设置为 localhost
+          '*': 'localhost',
+        },
+        bypass(req, res) {
+          if (!res) return;
+
+          // const { origin } = req.headers;
+
+          // 这两个 header 不对会 403，故直接删掉
+          // 改成正确的可能更好，不过我懒
+          delete req.headers.origin;
+          delete req.headers.referer;
+
+          // 以下代码处理跨域情况，不过现在不跨域了所以不需要了
+          // if (origin) {
+          //   res.setHeader('Access-Control-Allow-Headers', origin);
+          // }
+          // res.setHeader('Access-Control-Allow-Credentials', 'true');
         },
       },
     },
   },
-  baseConfig as UserConfig,
-);
+};
+
+export default mergeConfig(devConfig, baseConfig as UserConfig);

src/constants/index.ts

@@ -1,5 +1,4 @@
-export const HR_DOMAIN_BE: string =
-  'https://dev.back.recruitment2023.hustunique.com';
+export const HR_DOMAIN_BE: string = import.meta.env.VITE_HR_DOMAIN_BE;
 
 export const HR_DOMAIN_FE: string = 'hr2024.hustunique.com';
 

src/vite-env.d.ts

@@ -6,3 +6,18 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+interface ViteTypeOptions {
+  // 添加这行代码，你就可以将 ImportMetaEnv 的类型设为严格模式，
+  // 这样就不允许有未知的键值了。
+  strictImportMetaEnv: unknown;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_HR_DOMAIN_BE: string;
+  // 更多环境变量...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}