CAS单点登录成功后跳转页面显示404，参数错误怎么办？

从你描述的情况来看，问题大概率出在 CAS 服务端配置的 service 和实际回调地址不一致上。虽然你提到检查过 serviceUrl 配置，但我还是建议仔细核对以下几个地方。

首先，CAS 的 service 参数需要和前端跳转时传入的 service 参数完全一致，包括协议、域名、端口、路径，甚至不能有多余的斜杠或编码问题。你现在的配置是 http://localhost:8080/callback，但浏览器地址栏显示的错误提示 invalid_service 很可能是因为 CAS 认为这个地址不合法。

我注意到你的前端跳转逻辑里用了 http%3A%2F%2Flocalhost%3A8080%2Fcallback，这是经过 URL 编码的字符串。这里要特别注意，CAS 服务端在验证 service 参数时，通常会解码后再进行匹配。所以如果你的 CAS 配置里写的是未编码的 http://localhost:8080/callback，而实际传过去的参数是编码后的形式，可能会导致校验失败。建议你在 CAS 服务端的配置里也明确写成编码后的形式试试。

其次，确认一下 CAS 服务端是否启用了严格模式（Strict Mode）。如果启用了，它会对 service 参数进行更严格的校验，比如要求 HTTPS 协议或者不允许使用 localhost。这种情况下，建议将 localhost 替换为一个正式的域名，并确保使用 HTTPS。这不仅是为了解决问题，也是为了安全性考虑，毕竟单点登录涉及到用户凭证传递，用 HTTP 是非常危险的。

接下来，关于后端日志提示“无法解析 ticket”的问题，可能是因为前端接收到的 ticket 参数没有正确传递给后端接口。你需要检查前端是否完整地把 ticket 参数通过请求发给了后端。比如，你可以打印一下前端发出去的请求，看看是不是漏掉了 ticket 或者格式不对。

最后，给你一段示例代码，展示如何从前端接收 ticket 并发送给后端：

function handleCallback() {

    const params = new URLSearchParams(window.location.search);

    const ticket = params.get('ticket');

    if (ticket) {

        // 注意：这里的 /api/validate-ticket 是后端提供的接口

        fetch('/api/validate-ticket', {

            method: 'POST',

            headers: { 'Content-Type': 'application/json' },

            body: JSON.stringify({ ticket: ticket })

        })

        .then(response => response.json())

        .then(data => {

            if (data.success) {

                console.log('Ticket validated, proceed to login');

            } else {

                console.error('Ticket validation failed:', data.message);

            }

        })

        .catch(error => {

            console.error('Error during ticket validation:', error);

        });

    } else {

        console.error('No ticket found in URL');

    }

}

总结一下，解决这个问题的关键步骤是：
1. 确保 CAS 服务端配置的 service 地址和前端传入的地址完全一致，包括编码格式。
2. 检查 CAS 是否启用了严格模式，必要时替换 localhost 为正式域名并启用 HTTPS。
3. 确认前端是否正确获取了 ticket 参数，并完整地传递给后端。

另外提醒一句，调试过程中尽量避免直接打印完整的 ticket 参数到日志里，因为这是敏感信息，可能会被恶意利用。注意安全，别给自己挖坑。

你这问题出在CAS的service参数校验不通过，报invalid_service说明服务端根本不认你这个回调地址。前端这块看着没问题，但你URL编码搞错了。

重点是：CAS服务端配置里的service必须和你前端传过去的service完全一致，包括编码格式。你前端跳转时传的是http%3A%2F%2Flocalhost%3A8080%2Fcallback，这是双层编码了。实际CAS服务器收到的会变成http://localhost:8080/callback被错误解析。

正确的做法是：

1. 前端不要自己手动encode URL，让CAS组件处理

loginWithCAS() {

  const service = 'http://localhost:8080/callback'

  const casLoginUrl = https://cas-server/login?service=${encodeURIComponent(service)}

  window.location.href = casLoginUrl

}

2. 后端配置的service也必须是原始字符串，不能带编码

@Bean

public CasAuthenticationProperties casProperties() {

    return CasAuthenticationProperties.builder()

        .service("http://localhost:8080/callback")

        .build();

}

3. 确保你的回调接口 /callback 是真实存在的路由，Vue Router要配成history模式下的通配路由，不然刷新404就真报错了

最关键的是前后端service值要严格匹配，一个字符都不能差。你现在看到error=invalid_service基本就是这个原因。试完记得清浏览器缓存，CAS有时候会记错redirect状态。