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' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
如下图:

仔细看看自己跨域配置,设置成这样:
//设置跨域请求
app.all('*', function (req, res, next) {
//设置请求头
//允许所有来源访问
res.header('Access-Control-Allow-Origin', '*')
//用于判断request来自ajax还是传统请求
res.header('Access-Control-Allow-Headers', 'X-Requested-With')
//允许访问的方式
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
//修改程序信息与版本
res.header('X-Powered-By', ' 3.2.1')
//内容类型:如果是post请求必须指定这个属性
res.header('Content-Type', 'application/json;charset=utf-8')
next()
})
这是因为我在后端设置跨域请求的时候没有所需的请求类型。于是做了如下修改:
//设置跨域请求
app.all('*', function (req, res, next) {
//设置请求头
//允许所有来源访问
res.header('Access-Control-Allow-Origin', '*')
//用于判断request来自ajax还是传统请求
res.header("Access-Control-Allow-Headers", " Origin, X-Requested-With, Content-Type, Accept");
//允许访问的方式
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
//修改程序信息与版本
res.header('X-Powered-By', ' 3.2.1')
//内容类型:如果是post请求必须指定这个属性
res.header('Content-Type', 'application/json;charset=utf-8')
next()
})
结果就可以啦。
axios跨域请求报错:Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.的更多相关文章
- axios跨域请求报错
在nodejs的入口js中的配置路由之前加入这一段就可以了 app.all('*', function(req, res, next) { res.header("Access-Contro ...
- 关于python的bottle框架跨域请求报错问题的处理
在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是进入了error,而返回的状态却是200.url直接在浏览器访问也是正常的,浏览器按F12 ...
- java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)
1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法
原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...
- vue-cli3.0+node.js+axios跨域请求session不一样的问题
一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...
- axios 跨域请求允许带cookie,则服务器Access-Control-Allow-Origin应设置为具体域名,否则请求无法获得返回数据
1.通过允许跨域访问实现了跨域请求,但为了使每个请求带上session信息,我设置了withCredentials ,即: axios.defaults.withCredentials = true ...
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
随机推荐
- js中console.info的使用
语法:console.info(obj1 [, obj2, ..., objN]);console.info(msg [, subst1, ..., substN]); 参数obj1 ... objN ...
- springCloud学习1(集中式配置管理)
springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 一.前言 在开发普通的 web 应用中,我们通常是将配置项写在单 ...
- Java 之 设计模式——代理模式
设计模式——代理模式 一.概述 1.代理模式 (1)真实对象:被代理的对象 (2)代理对象:代理真实对象的 (3)代理模式:代理对象代理真实对象,达到增强真实对象功能的目的 二.实现方式 1.静态代理 ...
- python关于try except的使用方法
一.常见错误总结 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x IOError 输入/输出异常;基本上是无法打开文件 ImportError 无法引入 ...
- iOS学习——(转)解决iOS App打包后dSYM文件找不到的问题
dSYM文件缺失通常有两种情况**: 情况一:配置错误导致打包时没有生成dSYM文件 针对这种情况,通常是因为Project -> Build Settings下的Debug Informati ...
- idea2019的安装与激活
1.安装及相关资料下载 链接:https://pan.baidu.com/s/1njKjorAvaWftuGCvCQzP3A 提取码:r8h8 2.安装步骤 几乎是傻瓜式的安装,点击下一步即可 注意两 ...
- 数据库与数据仓库的区别实际讲的是OLTP与OLAP的区别
什么是数据仓库 数据仓库,英文名称为Data Warehouse,可简写为DW或DWH.数据仓库,是为企业所有级别的决策制定过程,提供所有类型数据支持的战略集合.它出于分析性报告和决策支持目的而创建. ...
- Linux无法被远程登录;用户的关机, 重启,注销,新增用户,删除用户
不能使用xshell连接到我的Linux服务器 通过再windows的cmd中ping了我的Linux地址,发现网络不通. 查看百度发现是因为网络没有选桥接模式,然后选完桥接模式告诉我: 然后发现没有 ...
- 计算机网络基础之TCP/IP 协议栈
计算机网络基础之TCP/IP 协议栈 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.TCP/IP 协议栈概述 1>.什么是TCP/IP协议栈 Transmission C ...
- Tomcat--安装部署
Tomcat安装部署 Tomcat简介 官网:http://tomcat.apache.org/ Tomcat服务器是一个免费的开源代码的Web应用服务器,属于轻量级应用服务器,在中小型系统和并发访问 ...