如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

问题描述：

由于restful接口需要在头部header传递两个字段：

Content-Type: application/json
Access-Token: 84c6635800b14e0eba4f7ece65e095a1

但是，在vue.js里面配置：

执行发送的时候出现：

意思是预发请求的时候不通过，不再正式发请求

经过反复的测试，发现，header里面包含自定义字段，浏览器是会先发一次options请求，如果请求通过，则继续发送正式的post请求，而如果不通过则返回以上错误

那这样就只能在服务端配置options的请求返回，代码如下：

  // TODO 支持跨域访问response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");response.setHeader("Access-Control-Expose-Headers", "*");if (request.getMethod().equals("OPTIONS")) {HttpUtil.setResponse(response, HttpStatus.OK.value(), null);return;}

上面代码需要加入允许的头部，content-type和access-token，并且判断请求的方法是options的时候，返回ok（200）给客户端，这样才能继续发正式的post请求。

修改之后成功发了post请求。

PS：

看了网上这么多解释，基本都用不到，关于AXIOS自定义头部字段的问题，貌似只有上述方法能够解决

跨域——vue中的axios.post使用json数据传输，出现请求头字段内容类型是不被允许的情况的解决方案相关推荐

苹果ajax跨域,vue中解决axios跨域问题【ajax在vue中的应用】
兴冲冲的开始用vue封装组件.自定义指令之后,开始实战.诶,等等,貌似少了--ajax交互? 好吧大致研究了一下axios,但是存在以下两个问题: 1.跨域问题 2.数据格式问题跨域信息示例: Fa ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
vue中使用axios请求接口，请求会发送两次
vue中使用axios请求接口,请求会发送两次的问题浏览器分为简单请求以及非简单请求: 解决方案: 跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTION ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式一,应用/ X WWW的窗体-ur ...
Vue 中使用 axios 传输数据，当数据量过大时会提示跨域？（√已解决）
环境 – 前端:Vue-cli 4.3.1 后端:Apache || Nginx+Thinkphp5 今天打算用写一个Markdown编辑器给博客用,然后需要将Markdown原文和解析好的HTML提 ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Vue中通过Axios向SpringBoot发送get和post请求
场景前端使用Vue+ElementUI实现页面布局. 跨域请求使用axios. 为了将axios的请求对象封装成公共的.新建request.js import axios from 'axios' ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...

跨域——vue中的axios.post使用json数据传输，出现请求头字段内容类型是不被允许的情况的解决方案

如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

跨域——vue中的axios.post使用json数据传输，出现请求头字段内容类型是不被允许的情况的解决方案相关推荐

最新文章

热门文章