首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

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

作者头像
微风-- 轻许--
发布2022-04-13 16:16:51
发布2022-04-13 16:16:51
4.9K0
举报
文章被收录于专栏:java 微风java 微风

1. 前端 vue 工程 post 请求后端接口,报错:

代码语言:javascript
复制
Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前端请求方式:

代码语言:javascript
复制
  this.$ajax({
        method: "post",
        url: this.GLOBAL.BASE_URL + "/gentle/first",
        data: {
          name: "JY",
          info: "test"
        }
      });

2. 解决:

在过滤器中设置请求头:

代码语言:javascript
复制
resp.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");

3. 过滤器完整写法:

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

代码语言:javascript
复制
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. 重新请求,访问接口成功 :

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

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

后记:

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

代码语言:javascript
复制
let headers= new Headers();
headers.set('Content-Type','application/json');
headers.set('Access-Control-Allow-Origin','*');
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/12/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档