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

关于前后端分离跨域问题——使用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的方式。

相关文章:

  • ChatGPT行业热门应用提示词案例-AI绘画类
  • Spring Web MVC入门
  • 分布式事务
  • 【吾爱出品】 视频批量分段工具
  • 438 找到字符串中所有的字母异位词
  • 04性能监控与调优篇(D1_学习前言)
  • 如何利用OGG WEB页面进行MySQL数据库数据复制的配置
  • HTML之JavaScript常见事件
  • 4.buuctf [SWPU2019]Web1及知识点
  • matlab基于梯度下降和软阈值化的去噪算法
  • 民用无人驾驶航空器操控员考试
  • C#: String s = new String(“Hello“)无法编译?编程语言字符集有两个?为什么这种变量名“\u0061\u0062”都能编译通过?
  • netcore https配置
  • node.js + html调用ChatGPTApi实现Ai网站demo(带源码)
  • Ae 效果详解:蒙尘与划痕
  • 类和对象详解(下)-----运算符重载
  • [Vivado报错] [Runs 36-527] DCP does not exist
  • matlab模拟风场的随机脉动风
  • 升级 SpringBoot3 全项目讲解 — JOOQ 为什么全面超越了 Mybatis?
  • HarmonyOS NEXT网络状态监听HTTP和RCP请求网络
  • 国际著名学者Charles M. Lieber全职受聘清华深圳国际研究生院
  • 陈颖已任上海黄浦区委常委、统战部部长
  • 停电催生商机,中国品牌 “照亮” 西班牙
  • 济南高新区一季度GDP增长8.5%,第二产业增加值同比增长14.4%
  • 海尔·2025青岛马拉松两选手被终身禁赛:违规转让号码、穿戴他人号码
  • 张元济和百日维新