Go+Svelte开发Web应用遇511网络认证错误求助

问题根源 #

localtunnel免费服务会对首次访问的域名要求人机验证（如输入验证码），验证通过后浏览器会保存会话Cookie。但fetch请求默认不会跨域携带Cookie，导致前端发起请求时无有效验证会话，返回511错误；手动在新标签打开后端地址时，浏览器完成验证并保存Cookie，后续请求就能复用该会话。

方案1：统一域名转发（推荐） #

避免使用两个独立的localtunnel域名，通过Svelte开发服务器的代理功能将API请求转发到本地Go后端，只需转发Svelte的5173端口即可。这样所有请求走同一个域名，既解决跨域问题，也避免localtunnel的多次验证。

修改Svelte配置（vite.config.js） #

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

修改Svelte前端fetch代码 #

<script>
  let name;
  async function fetchData() {
    // 请求本地代理路径，无需使用localtunnel后端域名
    const endpoint = "/api/sant";
    const response = await fetch(endpoint, {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      }
    });
    name = await response.json();
  }
</script>

启动服务流程 #

• 启动Go后端（监听8080端口）
• 启动Svelte开发服务器（监听5173端口）
• 用localtunnel仅转发Svelte端口：lt --port 5173

用户访问转发后的Svelte地址时，所有API请求会自动通过代理转到本地Go后端，无需处理跨域，也不会触发多域名验证。

方案2：允许跨域携带Cookie（适配双域名场景） #

若必须保留两个独立localtunnel域名，需调整CORS设置和fetch选项，让请求携带验证会话的Cookie。

修改Go后端CORS配置 #

func enableCors(w *http.ResponseWriter) {
    (*w).Header().Set("Access-Control-Allow-Origin", "https://chilly-rabbits-film-146-196-44-202.loca.lt")
    // 允许携带凭证（Cookie）
    (*w).Header().Set("Access-Control-Allow-Credentials", "true")
    // 允许必要请求头
    (*w).Header().Set("Access-Control-Allow-Headers", "Content-Type, Accept")
}

修改Svelte前端fetch代码 #

<script>
  let name;
  async function fetchData() {
    const endpoint = "https://giant-words-help-146-196-44-202.loca.lt/sant";
    const response = await fetch(endpoint, {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      // 携带跨域Cookie
      credentials: 'include'
    });
    name = await response.json();
  }
</script>

注意：该方案仍需用户首次访问后端域名时完成人机验证，Cookie保存后后续请求才能正常工作。

内容的提问来源于stack exchange，提问作者Mainak Bhattacharjee