解决：Request header field Content-Type is not allowed by Access-Control-Allow-Headers

拼搏现实的明天。 2022-04-03 05:29 1507阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

1. 前端 vue 工程 post 请求后端接口，报错：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前端请求方式：

this.$ajax({
            method: "post",
            url: this.GLOBAL.BASE_URL + "/gentle/first",
            data: {
              name: "JY",
              info: "test"
            }
          });

2. 解决：

在过滤器中设置请求头：

resp.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");

3. 过滤器完整写法：

过滤器用法见另一博文：[Springboot 项目中过滤器的使用][Springboot]

package gentle;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * 改写所有请求头
     * @author silence
     * @date 2018/12/11 15:19
     */
    
    @WebFilter(filterName = "requestFilter",urlPatterns = {"/*"})
    public class RequestFilter implements Filter {
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
    
        }
    
        @Override
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
            HttpServletResponse response = (HttpServletResponse) servletResponse;
            HttpServletRequest request = (HttpServletRequest)servletRequest;
    
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE,x-requested-with,Authorization");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            String method = request.getMethod();
            if(method.equalsIgnoreCase("OPTIONS")){
                servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
            }else{
                filterChain.doFilter(servletRequest, servletResponse);
            }
        }
    
        @Override
        public void destroy() {
    
        }
    
    }

4. 重新请求，访问接口成功 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

这样每次请求都会显示 2 次，第 1 次只返回个 success。第 2 次才是正式访问接口。

至于能不能只请求 1 次，目前我还不知道。

后记：

在网上看到可以在 js 中作如下设置，F12 中只提示一次请求。而且正好是我要的第 2 个请求，就是正式请求。

let headers= new Headers();
    headers.set('Content-Type','application/json');
    headers.set('Access-Control-Allow-Origin','*');

[Link 1]: https://www.captainai.net/jiangyu1013/
[Springboot]: https://blog.csdn.net/jiangyu1013/article/details/84957365
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220403/a436945e464944cf8f6c36b4c1ab2437.png

解决：Request header field Content-Type is not allowed by Access-Control-Allow-Headers

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关解决Request header field XXX is not allowed by access-control-allow-headers in preflight response

相关 Request header field xxxx is not allowed by Access-Control-Allow-Headers in preflight response问题

相关 Request header field token is not allowed by Access-Control-Allow-Headers in

相关解决：Request header field token is not allowed by Access-Control-Allow-Headers in

相关 Request header field countent-type is not allowed by Access-Control-Allow-Header in preflight resp

相关 Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight respon

相关 Request header field * is not allowed by Access-Control-Allow-Headers in preflight response问题解决

相关 ssm+vue 使用shiro后 post请求报错 Request header field Content-Type is not allowed by Access-Control-Allow-H

相关解决：Request header field Content-Type is not allowed by Access-Control-Allow-Headers

相关 laravel5.5 cors has been blocked by CORS policy: Request header field x-csrf-token is not allowed by