转载:https://www.cnblogs.com/caimuqing/p/6733405.html

问题描述:

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

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

但是,在vue.js里面配置:

执行发送的时候出现:

// 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自定义头部字段的问题,貌似只有上述方法能够解决

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

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

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

如何解决出现AXIOS的跨域问题:Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.的更多相关文章

  1. 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库

    一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...

  2. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  3. 解决阿里云OSS跨域问题

    解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...

  4. axios跨域请求报错:Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

    在做项目时,用到axios,数据用post提交时,老是报错,错误提示为: Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' fro ...

  5. 解决Bug:Size of a request header field exceeds server limit

    用了cms 发现这玩意真不好,老是有各种奇芭的问题跳出来 有时浏览网页时会出现 Bad Request Your browser sent a request that this server cou ...

  6. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  7. vue 使用axios 出现跨域请求的两种解决方法

    最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...

  8. axios解决调用后端接口跨域问题

    vue-cli通过是本地代理的方式解决接口跨域问题的.但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyT ...

  9. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

随机推荐

  1. Linux系统中lvm简介

    LVM逻辑卷管理器 实战场景:对于生产环境下的服务器来说,如果存储数据的分区磁盘空间不够了怎么办? 答:只能换一个更大的磁盘.如果用了一段时间后,空间又不够了,怎么办?再加一块更大的?换磁盘的过程中, ...

  2. Git命令行入门

    安装 下载与文档地址:https://git-scm.com/book/zh/v2 我使用的是linux系统,故使用命令行安装Git # apt-get install git 配置 # git co ...

  3. 第十二章 Java内存模型与线程

    Java内存模型(Java Memory Model,JMM): 主内存与工作内存:Java内存模型主要是定义程序中各个变量的访问规则.Java内存模型规定了所有的变量都存储在主内存(Main Mem ...

  4. 一些常见的Java面试题 & 面试感悟

    < 前言 > 近期在面试,深感这个行业的浮躁,一些菜不辣基的弱鸡开出的工资待遇要求,超过了我.不知道他们是怎么拿到那么高的工资的,难道是他在公司有亲戚朋友吗?有后台吗?是行业热钱真的过多了 ...

  5. 实现自己的HashMap

    准备工作 ,实现自己的Map.entry.代码如下 : import java.util.Map;public class MapEntry<K,V> implements Map.Ent ...

  6. ie8兼容性总结

    DOCTYPE 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记.attributes ...

  7. thinkphp51 重定向 redirect()

    thinkphp51 重定向 跨域 redirect() 可以重新定义新的路由,是fetch() 无法做到的.

  8. take it easy

    昨天魏辉在群里说,觉得自己以前很多事情做的不对,以前是个傻瓜,我说我也是这么觉得的.为什么这么说呢?因为我真的觉得以前的自己就是个SB.人的成长可能就是这样的吧,小时候的一些事情,或者是原生家庭的环境 ...

  9. git取别名配置

    已经配置的别名 $ git config --global alias.st status $ git config --global alias.co checkout $ git config - ...

  10. [SF] Symfony 标准 HttpFoundation\Request 实现分析

    使用方式 /** * 如果直接示例化 Request 默认是没有参数的,可以自己传入 * 本方法将 PHP 超全局变量作为参数然后实例化自身(Request)进行初始化. */ $request = ...