本地主机上的 NextJS、Strapi、Auth0：如何配置它使其在没有 ERR_SSL_PROTOCOL_ERROR 的情况下工作

Question

我正在开发一个网站，前端使用 NextJS，后端是 Strapi，我想使用 Auth0 作为身份提供者。我已将 Strapi 配置为使用 Auth0，这似乎有效。当我转到

http://localhost:1337/api/connect/auth0

时，我会看到 Auth0 自定义登录屏幕。但是，当我通过凭据时，我会返回一个

ERR_SSL_PROTOCOL_ERROR

我尝试使用 caddy 和命令

caddy reverse-proxy --from :8080 --to :1337

我已经将 Strapi 上的 server.ts 更新为如下所示：

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env.int('', 'https://localhost:8080'),
  admin: {
    url: '/',
    serveAdminPanel: false,
    auth: {
      secret: env('ADMIN_JWT_SECRET'),
    }
  },
  app: {
    keys: env.array('APP_KEYS'),
  },
  webhooks: {
    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
  },
});


process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

我已将 NextJS 应用程序中的 url 更新为指向 8080，并更新了 Auth0 回调 URL，以正确接受正确的 URL，但我仍然收到

ERR_SSL_PROTOCOL_ERROR

有什么想法吗？

Answer 1

您遇到的

ERR_SSL_PROTOCOL_ERROR

可能是由于 SSL/TLS 握手失败或配置错误造成的。当您在本地工作并尝试设置 HTTPS 环境时，尤其是使用反向代理和自定义端口时，有几个地方可能会出现问题。以下是一些故障排除步骤和注意事项：

1. Strapi 中的

url

配置不正确

server.ts

您已指示

url: env.int('', 'https://localhost:8080')

，这似乎不正确，因为

env.int

用于整数，但您指定的是 URL 字符串。应该更新它以正确引用字符串环境变量，或者如果不使用环境变量，则直接设置为字符串：

url: env('URL', 'https://localhost:8080'),

2.本地 HTTPS 的 SSL/TLS 证书

确保您拥有

localhost

的有效 SSL 证书。当您在本地运行 HTTPS 服务器时，浏览器需要有效的 SSL 证书才能建立安全连接。自签名证书可以工作，但需要正确设置它们，并且在某些情况下，需要由操作系统或浏览器手动信任。

如果您使用 Caddy 作为反向代理，当您使用 HTTPS URL 时，Caddy 会自动生成并使用自签名证书进行本地开发。确保 Caddy 的自动证书生成不会失败，并验证它是否以管理这些证书的适当权限运行。

3.信任自签名证书

如果 Caddy 生成自签名证书，您可能需要在操作系统上手动信任此证书以避免 SSL 错误。该过程因操作系统而异，但通常，您需要将证书添加到系统的受信任根证书存储中。

4.球童配置

确保您的 Caddy 配置（或命令行调用）正确设置反向代理来处理 HTTPS 流量。由于您使用命令行简写来设置反向代理，Caddy 应该自动处理 HTTPS，但如果有自定义配置或特定需求（例如标头修改），请考虑创建

Caddyfile

进行更精细的控制。

5. Auth0 回调 URL 和允许的来源

确保 Auth0 配置（回调 URL、注销 URL 和允许的来源）与您的设置匹配，包括协议 (

https://

)、主机 (

localhost

) 和端口 (

8080

)。任何不匹配都可能导致重定向失败或由于 CORS 策略而阻止请求。

6.浏览器缓存

有时，浏览器会主动缓存 SSL 状态和证书。尝试在隐身窗口中访问您的网站，或清除浏览器的缓存和 SSL 状态，然后查看错误是否仍然存在。

7.网络检查工具

使用网络检查工具或浏览器开发工具来跟踪 SSL/TLS 握手过程。 Wireshark 或 Chrome DevTools 中的“安全”选项卡等工具可以深入了解握手失败的位置。

最后的笔记

调整 HTTPS 的本地开发环境可能很棘手，尤其是在反向代理和身份验证流程方面。如果您仍然遇到问题，请考虑暂时切换回 HTTP 进行本地开发，以确定问题是与 SSL/TLS 设置有关还是与配置的其他部分有关。请记住在登台或生产环境中切换回 HTTPS 以确保安全。