当前位置: 首页 > article >正文

关于前后端分离跨域问题——使用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"}), //这里需要添加自定义的头部信息如Kt
			handlers.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的方式。


http://www.kler.cn/a/552048.html

相关文章:

  • 基于SpringBoot+Vue的装修装潢管理系统的设计与实现
  • LabVIEW 中的 3dgraph.llb库
  • shell脚本备份MySQL数据库和库下表
  • 广义表学习笔记
  • Copilot in OneNote(WebTeams)功能提升效率加倍
  • 【LangChain实践开发】如何对大模型I/O封装?
  • open webui docker安装方法
  • 今日写题04work
  • DeepSeek冲击(含本地化部署实践)
  • 详解 本机安装多个MySQL服务【为后续大数据量分库分表奠定基础,以mysql8.0为例,附有图文】
  • 短视频矩阵碰一碰发视频源码技术开发,支持OEM
  • LNMP+Zabbix安装部署(Zabbix6.0 Lnmp+Zabbix Installation and Deployment)
  • 六、k8s:pv和pvc
  • Python 基础-使用dict和set
  • 胶囊网络动态路由算法:突破CNN空间局限性的数学原理与工程实践
  • Unity合批处理优化内存序列帧播放动画
  • spring的核心配置
  • 图数据库Neo4j面试内容整理-Neo4j的性能
  • HashSet 的底层原理(简单易懂)
  • deepseek蓝耘云端智能助手:让AI成为你专属的智慧助理