关于 https://localhost, https://127.0.0.1, CORS 那些事

[jianglibo]

前端在开发的过程中有没有碰到过 CORS 的坑呢？欢迎提问，我也乐于分享（不是我更懂，只是碰到过而已）。

mkcert可以生成证书并将证书加入操作系统的信任列表，因此将证书配置到你的测试环境之后，可以直接访问 https://localhost:3000 而不会有任何警告。 要测试类似生产环境的 CORS ，比如前后端完全分离的架构，https 必不可少。

那么如何在局域网内完成类似的效果呢？比如 https://192.168.3.168 。或者使用 vscode remote ssh 的时候，在本地打开本地的浏览器可以访问，但是在 remote 端，有时候需要访问一下呢？也就是说需要一个分布式的 mkcert ，cert-ctrl，这个是我们写的。self-ca 在 这里生成，在每个需要访问你的测试服务的电脑上安装客户端即可。对于某些生产环境的管理页面，如果不需要公开访问，直接用自签发的 mTLS 即可。

题外话： 有些人对文章的内容不感兴趣，对文章中提到别人的软件也没关系，唯独对提到作者自己的软件耿耿于怀，其实大可不必，最好的做法是不要去理这样的贴子如果你觉得没有价值。大家都不理它，它就自然下沉消失不见了。

[xitler]

@jianglibo ？那我问你，如果你这个证书，泄露了怎么办，谁都可以远程调用你的生产环境

[xdzhang]

前段时间遇到 2 回这个情况,当时还是挺烦的.

[jianglibo]

@pingdog 那 Cookies + CORS 如何解决？必须用 https 了吧。：），所以在 chrome 下你无法调试登陆，在你提到的场景下，更加需要 cert-ctrl ，下次你公司碰到这个问题时，希望你能想到这个贴子。

Cross-site cookies REQUIRE SameSite=None; Secure
But Secure cookies cannot be set over HTTP

[jianglibo]

@xitler 选择 device wrapper only ，服务器端无法解密，必须时客户端的私钥解密，私钥从不离开你的服务器。

[sofukwird]

申请个域名指向本地, 然后使用证书管理工具获取对应的证书

[jianglibo]

@xitler 选择有效期 6 天的证书，以保证最大的安全性。

[jianglibo]

@sofukwird 你的解决方案可行，但经常更新比较烦，自认证证书设个 20 年，整个职业生涯哦都不需要更新了。

[sofukwird]

CORS 不是坑是特性

[zcf0508]

@sofukwird #25 我的工具 https://github.com/zcf0508/unplugin-https-reverse-proxy 可以自动在本地添加 host 并且配置证书，无缝调试

[xitler]

我觉得不太行，而且也根本不需要什么 https 的 localhost 。开发，测试，rc ，线上环境不做配置隔离吗，一套对一套

[ragnaroks]

难道只有我是 https://localhost.mydomain.com:3443/ ？

[sofukwird]

真自签证书的话我更喜欢用 XCA 自签证书管理

[jianglibo]

@sofukwird XCA 是桌面程序，我的是网页版有什么区别呢？

[ltaoo1o]

重点「前端开发过程的 CORS 问题」，正如前面提到，无论 vite 还是 webpack 都有解决方案并且很方便就能使用，完全没必要额外安装什么东西，尤其是根证书这种存在风险的东西。

题外话：这就是软文，软文都是被排斥的，因为不够客观，经常是为了推自己的东西，强行构造出一个场景或者问题，从而引入自己的东西，都不考虑实际情况，就比如这篇帖子

要推广就大大方方的推，好东西从不被排斥

[liuhuihao]

？开发环境的话难道不应该是 vite 或 webpack 的 devServer 转发一下的事儿吗，如果是线上直接配一下后台的 CORS 返回头或者 nginx 代理一下不都能解决问题吗

为啥要搞个证书嘞

[jianglibo]

@liuhuihao 我完全理解你的困惑，大部分人可能没有真正接触过前后端完全分离的架构，前端是静态的 html ，所有逻辑在 api 一侧，包括登陆信息等。 当 cors 遇上 cookie 时，现代浏览器会有严格的限制，甚至必须是 https 。https://cjj365.cc 是 html 的静态文件，是用静态文件生成器生成的。

[Ketteiron]

你应该更直接地表述这个工具到底解决了什么场景下的问题。
什么时候有用？即使用 cookie 鉴权且后端设置了 SameSite=None; Secure 且需要远程访问本地运行的项目且需要保证开发环境与实际环境完全一致。
这样就能劝退完全用不上的 99.99% 用户了。

[KellyAlsa]

本地开发应该不需要搭建 https 的服务吧

[jianglibo]

@Ketteiron 你比大多数评论者知道其中的微妙，不是远程访问的问题，在本地调试也是一样，在需要鉴权 cookie 的情况下，本地调试也需要 https.关于工具的用处，自认证证书的签发是很小一部分功能，主要是 public 证书签发。

[zh3256]

生产环境是否有 cors 问题，应该通过上线前端到端测试+灰度来避免，而不是你这种奇技淫巧。
你的做法和本地 nginx 代理没啥优势，只要上线前没有实际环境校验过，谁能保证自己方案一定过呢？