cors 跨域问题 git pages 前后端分离 vue nest 问题 解决+总结

记一次配置github个人网站时的跨域问题总结

git pages 截至2022年8月支持跨域访问（听说gitee不支持，所以无法实现前后端分离）
本文使用方法：按照报错/问题寻找对应标题，进入链接学习相关概念/操作（本文不提供详细概念/操作）

从小白搞懂cors

前端devServer配置

在进行vue前端开发调用后端api时，网上都会提示配置devServer属性。按照网上教程部署vue到git pages时，会想当然的把target中的url替换为后端入口，导致git pages报404。

注意：devServer只在开发环境下有效

更改axios的baseURL

当Node环境为生产环境时，更换baseURL实现链接指向后端入口。

baseURL:
    process.env.NODE_ENV === "production"
      ? "https://backend.url:port/"
      : "/api",

成功指向后端入口，随后出现跨域访问问题：

Access to XMLHttpRequest at ‘https://backend.url:port/’ from origin ‘https://xiawusharve.github.io’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

后端开启cors

原因是浏览器检测到后端没有携带允许跨域访问的响应头
在nest.js中，开启后端cors的方法是app.enableCors()（在main.ts中）
有些开发者完成这个步骤后还会出现问题：

The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

withCredentials: false

有些开发者按照网上的教程不经意间设置了axios的withCredentials: true，设置成false即可

补充

仍然没有解决？参考我实际解决过程中踩的一些坑：

1. 检查baseURL的后端入口是根目录（去掉/api/路径）
2. app.enableCors({ origin: 'https://xiawusharve.github.io/' });手动输入前端地址，git pages可能不是这个origin（不太清楚），请使用缺省值。

小小的补充

请支持我和镭镭的网站！