当前位置: 首页 > 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"}), //这里需要添加自定义的头部信息如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的方式。

http://www.lryc.cn/news/539783.html

相关文章:

  • 三层渗透测试-DMZ区域 二三层设备区域
  • 领航Linux UDP:构建高效网络新纪元
  • 基于MATLAB的均匀面阵MUSIC算法DOA估计仿真
  • HTML/CSS中后代选择器
  • 深入解析「卡顿帧堆栈」 | UWA GPM 2.0 技术细节与常见问题
  • 推荐几款较好的开源成熟框架
  • Mysql全文索引
  • 配置终端代理
  • 51单片机学习之旅——在LCD1602上显示时钟
  • Jest单元测试
  • C++字符串处理指南:从基础操作到性能优化——基于std::string的全面解析
  • JVM类加载过程详解:从字节码到内存的蜕变之旅
  • 【力扣Hot100详解】解锁“字母异位词分组”:用排序魔法一键通关力扣!
  • vite配置scss全局变量
  • Spring Boot01(注解、)---java八股
  • 2.19学习记录
  • 汽车免拆诊断案例 | 2013 款奔驰 S300L 车起步时车身明显抖动
  • 【HeadFirst系列之HeadFirst设计模式】第5天之工厂模式:比萨店的秘密武器,轻松搞定对象创建!
  • Redis如何解决热Key问题
  • 从开发到部署:EasyRTC嵌入式视频通话SDK如何简化实时音视频通信的集成与应用
  • Zookeeper(58)如何在Zookeeper中实现分布式锁?
  • Mac端homebrew安装配置
  • Spring 接入 DeepSeek
  • vscode将文件中行尾默认CRLF改为LF
  • python-leetcode 33.排序链表
  • 【数据结构初阶第十二节】设计循环队列
  • 基于微信小程序的民宿短租系统设计与实现(ssm论文源码调试讲解)
  • 使用 Jetty 构建 HTTPS 服务入门指南
  • 数据结构《图》
  • 用Chrome Recorder轻松完成自动化测试脚本录制