Javascript fetch 调用后端两次 [重复]

Posted

技术标签:

【中文标题】Javascript fetch 调用后端两次 [重复]【英文标题】:Javascript fetch is calling backend twice [duplicate] 【发布时间】:2021-06-11 16:45:22 【问题描述】:

我有用 java ee 和 jersey 编写的后端应用程序。当我使用 javascript Fetch API 将数据发布到我的休息端点时,我看到过滤器被触发了两次。一旦它没有授权标头,第二个就是它。当我尝试从网络浏览器打开我的网站时,这个过滤器只被调用一次。为什么会这样。也许是因为 CORS?

在我的单个帖子的日志下方,都是从同一个过滤器打印出来的。

 http://localhost:8080/BlogRest/controller/endpoint/|#]
  Key=host, value=localhost:8080|#]
  Key=origin, value=http://localhost:3000|#]
  Key=access-control-request-method, value=POST|#]
  Key=content-length, value=0|#]
  Key=access-control-request-headers, value=authorization,content-type|#]
  Key=connection, value=keep-alive|#]
  Key=accept, value=*/*|#]
  Key=user-agent, value=user agent data|#]
  Key=referer, value=http://localhost:3000/|#]
  Key=accept-language, value=pl-pl|#]
  Key=accept-encoding, value=gzip, deflate|#]
  

第二次通话

  http://localhost:8080/BlogRest/controller/endpoint/|#]
  Key=host, value=localhost:8080|#]
  Key=origin, value=http://localhost:3000|#]
  Key=content-type, value=application/json|#]
  Key=accept-language, value=pl-pl|#]
  Key=accept-encoding, value=gzip, deflate|#]
  Key=connection, value=keep-alive|#]
  Key=accept, value=*/*|#]
  Key=user-agent, value=user agent data|#]
  Key=authorization, value=Bearer token|#]
  Key=referer, value=http://localhost:3000/origin|#]
  Key=content-length, value=15|#]

【问题讨论】:

因为 CORS,fetch() 首先运行 HEAD /path 来获取 headers,然后 [GET/POST/PUT/DELETE] /path 来实际执行请求 有没有办法设置过滤器在 fetch 请求标头时不被调用?我的意思是第一次通话。 CORS 是必需的。 【参考方案1】:

由于 CORS,有两个请求。一种请求方法是 OPTIONS,当它被执行时,就会开始预期的 POST 请求。 OPTIONS 请求不调用端点,它只是获取服务器配置。所以我通过使用 HttpServletRequest getMethod() 的方法过滤了我的 Java 过滤器请求。

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain)
            throws IOException, ServletException 

        HttpServletRequest requ = (HttpServletRequest) request;

        if (requ.getMethod().toLowerCase().equals(HttpMethod.OPTIONS)) 
            chain.doFilter(request, response);
            return;
        

        //do something on not options method.            

        chain.doFilter(request, response);

    

【讨论】:

以上是关于Javascript fetch 调用后端两次 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

React JS - onChange触发两次

必须从 CoreData 调用 fetch 两次

秒杀系统设计五要点:前端三板斧+后端两条路!

秒杀系统设计的 5 个要点:前端三板斧+后端两条路!

大厂再问秒杀系统,就抓住这5个要点来回答:前端三板斧+后端两条路!

C# 如何设置select(下拉框) 默认第一个option为"请选择",分为前端和后端两种方式?