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

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

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 项目中过滤器的使用

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 {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic 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);}}@Overridepublic void destroy() {}}

4. 重新请求,访问接口成功 :

 

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

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

 

后记:

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


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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

书写README的各种markdown语法

README 该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充,称之为GitHub Flavored Markdown。简称GFM,GFM在GitHub上有广泛应用,除了README文件外,issues和wiki均支持…

Apache2.4配置ssl

1》验站 如下截图,验站就是在DNS域名商哪里,在对应host下面,添加一个TXT记录类型,主机记录,记录值后,检测即可。   2》SSL证书申请 阿里云,腾讯云有很多免费证书申请,免费的缺点是…

助你解决新手开车四大问题 为您支招

新手开车起步技巧涉及方方面面,对于新手来说,如何首次将车独自开上路且不发生任何意外是众多人热切盼望的理想方式。但是新手上路难免会磕磕碰碰,发生小摩擦都是在所难免的,那么如何在起步阶段就将发生事故的概率降到最低呢?在此…

VUE - get 、post 请求后端接口:get 、post 写法 (Axios 中文说明文档地址)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 Axios 中文使用说明文档地址:Axiox 中文说明文档 我只是记录下写法,两种请求都能正常运行: 1. 安装…

离合器半联动点的判断和技巧 为您支招

现在将离合器半联动的使用方法揭密如下:将离合器抬到车开始动时你就别再抬了,你如果感觉到车有些快了,可再往下踩些,你如果感觉到车有些慢了,可再往起抬些,这样可将车速控制在你想要的速度范围之内。 ● 坡…

VUE:组件间相互跳转、页面带参跳转

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 只是记录下用法: 从 A 页面跳转到 B 页面。 如下写法: A 页面跳转方式: 代码: getdat…

如何调整反光镜和座椅的位置 为您支招

【太平洋汽车网 学车频道】首先要进行座椅的高度调整,上下调整座椅让头部离车顶至少还有一拳的距离。如果座椅调得太高,车辆在颠簸时头部容易碰到车顶,调得太矮了又会影响视线。然后是前后距离的调整,当脚踩住制动踏板至最深处时…

关于hexo与github使用过程中的问题与笔记

快速阅读 如何用github 和hexo 创建一个blog 1.github中要新建一个与用户名同一样的仓库, 如:homehe.github.io - 必须是io后缀。一个帐户 只能建立一个2. 绑定域名 , A记录指向ip, cname记录指向homehe.github.io 3. 配置sshkey - 个人设置 -> SSH a…

CSS 中 的 margin、border、padding 区别 (内边距、外边距)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这…

什么是转向灯?使用转向灯有何技巧?

什么是转向灯?如何使用转向灯?新手司机对车辆还不是很熟悉,如何正确使用转向灯,尤其是在不同路段中该怎么正确使用转向灯,成为了很多新手们的困扰之一,今天我们就来为大家解决这个问题吧! 转向灯…

集合练习:登录注册功能

需求: 1、登录账号唯一,在注册时验证输入的账号是否可用,若已存在,则不可用,若不存在则可用2、登录时使用账号密码进行验证1 /**2 * author Administrator3 * 登录信息 4 */5 public class UserLogin {6 …

vue 通信、传值的多种方式(超详细)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等&am…

新手开车 驾驶小秘诀要牢记

有很多人刚买到新车兴奋异常,凭着并不熟练的驾驶技术,过了几天的车瘾后发现,刚买的车怎么出现了这样那样的问题 有很多人刚买到新车兴奋异常,凭着并不熟练的驾驶技术,过了几天的车瘾后发现,刚买的车怎么出现…

C++没有调用析构函数

github地址 在项目中遇到一个问题,析构函数没有调用产生了内存泄露。 具体见valgrind检测libevent内存泄露 我们看两个例子 demo1 class Test1; void del(Test1* obj){delete obj; } class Test1{ public:Test1(){printf("Test1\r\n");}~Test1(){pri…

实际操作之路考的这些事

辛苦了这么久练习路考,今天终于实际操作到我路考了。上车以后。关上车门。把考试的单地上给考官。还没有认真的去看考官一眼。于是就听到考官用低沉的声音对我说:你好!当时就感觉有一点意外。没想到考官你这么有礼貌。然后我就没那么紧张了&a…

[C# 网络编程系列]专题十二:实现一个简单的FTP服务器

引言: 休息一个国庆节后好久没有更新文章了,主要是刚开始休息完心态还没有调整过来的, 现在差不多进入状态了, 所以继续和大家分享下网络编程的知识,在本专题中将和大家分享如何自己实现一个简单的FTP服务器。在我们平…

vue 2 使用 Bus.js 实现兄弟 (非父子) 组件通信 简单案例

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可…

jenkins自动化部署

jenkins自动化部署 github地址 首先设置源码地址,jenkins会从仓库中拉取最新代码 拉取代码后运行shell脚本自动进行编译 cd mediaService cmake -S . -B cmake-build-release-hisi3531 -DCMAKE_C_COMPILER/opt/hisi-linux/x86-arm/arm-hisiv500-linux/target/bin…

学开车不能急于求成,心急上路

我发现很多人开始学开车以后就急着要上路,觉得开车是很简单的事情,个人觉得开车虽然不难(相对于会开车的人来说),但是,虽然不是很难,也不是一学会开车起步就能上路去潇洒的。急于求成的人很容易…

valgrind检测libevent内存泄露

valgrind检测libevent内存泄露 github地址 在使用封装好的http库时,遇到了如下的内存泄露,一开始在definitely处还存在泄露,这里就不贴图了,已经被淹没了。 根据提示定位出错代码位置,如下图: 这里提示ev…