前端在开发的过程中有没有碰到过 CORS 的坑呢？欢迎提问，我也乐于分享（不是我更懂，只是碰到过而已）。
mkcert可以生成证书并将证书加入操作系统的信任列表，因此将证书配置到你的测试环境之后，可以直接访问 https://localhost:3000 而不会有任何警告。 要测试类似生产环境的 CORS ，比如前后端完全分离的架构，https 必不可少。
那么如何在局域网内完成类似的效果呢？比如 https://192.168.3.168 。或者使用 vscode remote ssh 的时候，在本地打开本地的浏览器可以访问，但是在 remote 端，有时候需要访问一下呢？也就是说需要一个分布式的 mkcert ，cert-ctrl，这个是我们写的。self-ca 在 这里生成，在每个需要访问你的测试服务的电脑上安装客户端即可。对于某些生产环境的管理页面，如果不需要公开访问，直接用自签发的 mTLS 即可。
题外话： 有些人对文章的内容不感兴趣，对文章中提到别人的软件也没关系，唯独对提到作者自己的软件耿耿于怀，其实大可不必，最好的做法是不要去理这样的贴子如果你觉得没有价值。大家都不理它，它就自然下沉消失不见了。
 | 1 willbeok 3 小时 14 分钟前 能 get 到需要解决的场景问题，但这个工具的介绍有点看不太明白。mkcert 安装后浏览器会信任证书，cert-ctrl 也能自动完成信任？ self-sa 是一个命令行，没看明白作用是什么，有没有这套组合的系统架构图说明一下呢 |
 | 2 ff521 3 小时 10 分钟前 只要不是 AI 生成的内容就好 (主要是和本站宗旨不符,回复都不能 AI,主题反而随便 AI 生成,让人感觉割裂) |
 | 3 Rache1 3 小时 4 分钟前 你想要在其机器也能获得 https 访问，只需要按照 mkcert 的说明，把证书发其他机器然后安装信任根证书就好了。 https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installing-the-ca-on-other-systems:~:text=Installing%20the%20CA,key.pem. |
 | 4 jianglibo OP PRO @willbeok 如果你注册一下, 这个架构就非常清晰了，cert-ctrl 登陆之后，类似于 cloudflare,tailscale 客户端，它和[中心服务器]( https://api.cjj365.cc/r/v2ex1)交互，你在 web 端的 CA ，证书全部会自动分发，这样描述你能明白吗？ |
 | 5 chaoshui 2 小时 59 分钟前 我认为解决这个问题的方式是使用代理，而不是在的操作系统里安装莫名奇妙的证书。 Vite/Webpack/Next.js 不都有代理解决方案吗？ |
| 6 jianglibo OP PRO @Rache1 一般来说证书固定在提供服务的机器上，http server,mail server etc. 而 ca 需要导入到需要访问这个服务的机器上，mkcert 的使用场景本机，如果你要达成从其它机器访问又变成手动模式了，如果是手动模式，那么你直接用 openssl 好了。工具的目的是让你不要去折腾，或者一次性设置，在整个职业生涯中可重复利用以节约时间和脑力。 |
| 8 jianglibo OP PRO @chaoshui 代理就是避开了 CORS ，你可能需要更深层的思考和实践。访问[这里]( https://api.cjj365.cc/r/v2ex1)，然后启用 chrome 的 dev panel ，仔细观察请求，你会更深的理解这个问题。 |
| 9 jianglibo OP PRO @xitler 为了便于你理解，比如有一个 api 服务器, https://api.some.where.support.cors , 你从服务器一侧调用没有任何问题，但是你直接从你的浏览器调用这个 api 为发生什么， 想象一下，实践一下，不会在感到迷惑，提高了自己的水平. |
| 10 jianglibo OP PRO |
| 11 Rache1 2 小时 28 分钟前 @jianglibo 你这不也是要在访问侧安装东西吗，mkcert 只是需要你把那个 CA 导入到访问侧的主机上就好了（基于这个 CA 生成的证书都不需要在管了），还不需要额外装软件呢。 |
| 12 jianglibo OP PRO @Rache1 就是涉及到 ca 的复制、导入，系统重装之后就全部要重来了，原来的证书和 ca 都不见了，cert-ctrl 不需要在机器之间复制，重装系统也没有关系。当然也不是没有代价，就是你提到的需要安装客户端。 |
 | 13 zcf0508 1 小时 57 分钟前 加证书不解决跨域问题吧 |
 | 14 liaozzzzzz 1 小时 53 分钟前 via Android nginx：？ |
| 16 jianglibo OP PRO @zcf0508 从机制上来说证书和 cors 关系不大，但在实际使用中密切相关。 你可以试试看，http://localhost:3000 然后 cors 请求一个 https 或者 http 的第三方站点，你就会体会到为什么相关，chrome 可能甚至不允许你用 http 跨域。 |
| 17 jianglibo OP PRO @shintendo 你不明白，而且也不想进步，那也没办法，我是希望能帮助到有求知心的人。避开 CORS 就代表 CORS 不需要了吗？你作为前端甚至不知道 CORS 的使用场景，还叽里咕噜。 |
 | 18 v2er119 1 小时 40 分钟前 如果在代理上用，请求和响应的内容都是可以解密？ |
| 19 jianglibo OP PRO @v2er119 代理这个词不准确，刚才评论提到的代理都是在公司内部开发时为了避开 CORS 而为之，属于代取，但是不能暴露进入生产环境之后可能遇到的 CORS 问题。 |
 | 20 pingdog 1 小时 26 分钟前 via iPhone 引用 @shintendo 的话“叽里咕噜说一堆” 从头到尾看了两遍，才发现 OP 只是在推广自己的项目 > 也就是说需要一个分布式的 mkcert ，cert-ctrl ，这个是我们写的。 dev env 直接让 SRE 在 cors policy 加多一个 localhost 不就行了吗，搞这么复杂，反正 dev 上的资源随便 |
 | 22 xdzhang 1 小时 5 分钟前 前段时间遇到 2 回这个情况,当时还是挺烦的. |
| 23 jianglibo OP PRO @pingdog 那 Cookies + CORS 如何解决？必须用 https 了吧。：），所以在 chrome 下你无法调试登陆，在你提到的场景下，更加需要 cert-ctrl ，下次你公司碰到这个问题时，希望你能想到这个贴子。 Cross-site cookies REQUIRE SameSite=None; Secure But Secure cookies cannot be set over HTTP |
 | 25 sofukwird 1 小时 1 分钟前 申请个域名指向本地, 然后使用证书管理工具获取对应的证书 |
| 28 sofukwird 58 分钟前 CORS 不是坑是特性 |
| 29 zcf0508 54 分钟前 @sofukwird #25 我的工具 https://github.com/zcf0508/unplugin-https-reverse-proxy 可以自动在本地添加 host 并且配置证书，无缝调试 |
 | 30 xitler 53 分钟前 我觉得不太行，而且也根本不需要什么 https 的 localhost 。开发，测试，rc ，线上环境不做配置隔离吗，一套对一套 |
 | 31 ragnaroks 50 分钟前 难道只有我是 https://localhost.mydomain.com:3443/ ？ |
| 32 sofukwird 50 分钟前 真自签证书的话我更喜欢用 XCA 自签证书管理 |
 | 34 ltaoo1o 39 分钟前 重点「前端开发过程的 CORS 问题」，正如前面提到，无论 vite 还是 webpack 都有解决方案并且很方便就能使用，完全没必要额外安装什么东西，尤其是根证书这种存在风险的东西。 题外话：这就是软文，软文都是被排斥的，因为不够客观，经常是为了推自己的东西，强行构造出一个场景或者问题，从而引入自己的东西，都不考虑实际情况，就比如这篇帖子 要推广就大大方方的推，好东西从不被排斥 |
 | 35 liuhuihao 35 分钟前 ？开发环境的话难道不应该是 vite 或 webpack 的 devServer 转发一下的事儿吗，如果是线上直接配一下后台的 CORS 返回头或者 nginx 代理一下不都能解决问题吗 为啥要搞个证书嘞 |
| 36 jianglibo OP PRO @liuhuihao 我完全理解你的困惑，大部分人可能没有真正接触过前后端完全分离的架构，前端是静态的 html ，所有逻辑在 api 一侧，包括登陆信息等。 当 cors 遇上 cookie 时，现代浏览器会有严格的限制，甚至必须是 https 。https://cjj365.cc 是 html 的静态文件，是用静态文件生成器生成的。 |
Select Language