使用域名请求本地项目并解决跨域问题首先，拆分问题：域名映射。访问域名然后隐射到本地的项目，直接修改host，将域名，隐

需求：当前有一个express的node后端服务，还有一个vue3的vite前端项目，要做到本地的电脑上实现域名访问前端项目，然后实现在项目中访问后端接口。

首先，拆分问题：

当前有一个express的node后端服务

还有一个vue3的vite前端项目，

要做到本地的电脑上实现域名访问前端项目，

然后实现在项目中访问后端接口。

域名映射。访问域名然后隐射到本地的项目，直接修改host，将域名，隐射到本地的127.0.0.1；
配置端口。
- 前端项目在vite.config.ts中直接配置80端口，这样就可以使用电脑默认的80端口进行前端项目的访问；
- 后端项目想要被访问，直接在前端项目中配置好api请求的域名，在域名之后直接加上端口即可；
```
VITE_API_URL = http://api.admin.xxx.cn:3002
```
此时就能够实现前端直连接口，但是此时有跨域问题

前端代理。如果已经实现直连，其实可以不使用代理，但是不管怎样，在请求地址之后加上端口，还是很不优雅的，所以要去掉端口，此时就需要前端项目的node服务进行代理。就是说：

去掉上边配好的端口代理
配置vite的服务器proxy选项，例如：

  server: {
  port: 80, // 前端项目端口
  host: '0.0.0.0', // 监听IP地址
  proxy: {
    [VITE_API_URL_PREFIX]: {
      target: 'http://api.admin.xxx.cn:3002/api', // 将目标请求转发到后端服务上并加上端口号
      changeOrigin: true, // 是否改变请求源
      rewrite: (path) => path.replace(/^\/api/, ''), // 请求重写规则
      bypass(req, res, options: any) { // 代理函数，类似于中间件或者钩子函数，可以在其中设置header或者打印数据，或者做其他动作
        const proxyURL = options.target + options.rewrite(req.url);
        console.log('proxyURL', proxyURL);
        // console.log('VITE_API_URL_PREFIX', VITE_API_URL_PREFIX);
      },
    },
  },
},

这样就可以实现本地使用域名访问前端项目，并且不存在跨域问题了

前后端交互过程中，解决跨域问题，后端必须要进行设置，允许对应目标的请求过来。 express中可以使用cors()插件，但是请注意，如果前端不携带cookie,cors()的配置项就可以写成 *，即允许任意域名的请求，例如：

app.use(
  cors({
    origin: "http://admin.xxx.cn",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
    allowedHeaders: "Content-Type,Authorization",
    credentials: true, // 如果需要传递凭据
  })
);

但是如果前端需要携带cookie，那么cors()的配置项就不能够为 *，必须要是一个具体的域名才可以。之所以这么做，倒也不难理解，从安全的角度上来说，一个网站的cookie就是一个用户的隐私，而隐私是绝对不可能随随便便给到任何网站的，想要拿到某一个网站的cookie,就必须要指定具体的域名，就像你能够叫出另一个人的名字，就可以证明，你和这个人，不管怎么说，总是有关系的，否则你们就应当不认识。所以，要在请求中携带cookie,前端的axios中应当配置 withCridential:true；后端硬要配置具体域名，例如：

前端代码

/** 获取用户列表 */
export const getUserList = (params: IGetUserParamsSchema) => {
  return request.get<ListPageModel<UserModel>>({
    url: Api.GetUser,
    params,
    withCredentials: true,
  });
};

后端代码

app.use(
  cors({
    origin: "http://admin.xxx.cn",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
    allowedHeaders: "Content-Type,Authorization",
    credentials: true, // 如果需要传递凭据
  })
);

OK，需求得解。