关于前后端分离跨域问题——使用DeepSeek分析查错

我前端使用ant design vue pro框架，后端使用kratos框架开发。因为之前也解决过跨域问题，正常是在后端的http请求中加入中间件，设置跨域需要通过的字段即可，代码如下所示：

func NewHTTPServer(c *conf.Server, s *conf.Secret, rolesm *service.RolesManageService, tracer trace.TracerProvider, logger log.Logger) *http.Server {var opts = []http.ServerOption{http.Middleware(recovery.Recovery(),tracing.Server(tracing.WithTracerProvider(tracer)),logging.Server(logger),validate.Validator(),metadata.Server(),LocalHttpRequestMiddleware(),selector.Server(jwt.Server(func(token *jwtv5.Token) (interface{}, error) {return []byte(s.Bigantauthen), nil}, jwt.WithSigningMethod(jwtv5.SigningMethodHS256)),).Match(NewWhiteListMatcher()).Build(),),
// 下面需要解决跨域问题的字段http.Filter(handlers.CORS(handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"}),handlers.AllowedMethods([]string{"GET", "POST", "HEAD", "OPTIONS", "PUT", "DELETE"}),handlers.AllowedOrigins([]string{"*"}),handlers.AllowCredentials(), // 允许携带凭证（如 cookies）)

之前可以正常运行，但是我在前端设计时，在登录请求后的请求中，在头部信息加入了一个自定义字段，为了后端获取后检索缓存信息，这样就不用反复从数据库查询了。想法是这个样子但是测试中就开始报错了，报的是跨域错误，代码如下。

Access to XMLHttpRequest at 'http://localhost:8002/user/info' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但奇怪的是前面login的请求可以正常通过，后面的userinfo请求就拒绝了。我就在想，要是跨域问题，就应该所有请求都拒绝呀，不应该选择性拒绝呀，而且我后端也没做相关的请求过滤的语句，报错的有点蹊跷。

我于是开始问DeepSeek。它给我的回答和之前设置的内容一样。要不就在前端做代理，如下代码所示，对vue.config.js做相关修改。

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8002', // 后端地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

但是，我这里不想修改前端，因为要是实际部署，如果跨域问题是出在后端，部署之后bug还会存在。于是我把网页控制台的报错信息截图发给DeepSeek，让它帮忙给分析以下，并且把我的疑问也一同发给它。后来，在它给的答案中无意中发现了一条内容，引起了我的注意。就是如下图所示的内容：

handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization", "Your-Custom-Header"}),

这里有一个"Your-Custom-Header"你自定义的头。哦！我恍然大悟，可能是我在userinfo中在头部自定义的头部信息的原因。为了验证我的猜测，我把头部自定义的头部信息删除后，再去测试，发现可以通过了，跨域报错没有了，这证明了我的猜测是正确的。于是在服务端做了如下调整：

http.Filter(handlers.CORS(handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization", "Kt"}), //这里需要添加自定义的头部信息如Kthandlers.AllowedMethods([]string{"GET", "POST", "HEAD", "OPTIONS", "PUT", "DELETE"}),handlers.AllowedOrigins([]string{"*"}),handlers.AllowCredentials(), // 允许携带凭证（如 cookies）)

将前端自定义的头部键字段：Kt  添加在了cors请求里，再去测试，可以正常运行了。

总结，DeepSeek真的很强大，你完全可以将它作为你的一个老师，有问有答，按照思维逻辑循序递进，它不但可以读懂你的问题，代码，它还能读懂截图。对于程序员学习和工作都有极大的帮助，用好了真可谓事半功倍。当然，网上也有很多直接用DeepSeek写代码的，这个虽然效率更高，但对于新手来说，我个人建议起初不要那么使用。因为DeepSeek直接写代码，也会和人类一样，会出错，有各种bug，并且人机交流过程中，它做的未必真的就是你想要的。你要看懂它写的程序，并且把bug找出来，告诉它如何修改，这需要你自身有一定功底，在内功没练好之前，你很难驾驭有DeepSeek自动生成一整个正确的项目。不如从简单问题着手，分单一模块功能交给DeepSeek编写，然后自己完成单元测试，然后逐步的组合，直至完成整个项目。这样，从中你也得到了学习和锻炼，也明白了整个过程和细节。不是由AI支配你，而是你使用了AI。我认为这才是好的使用AI的方式。