vue-resource Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

最新推荐文章于 2024-07-22 16:26:33 发布
最新推荐文章于 2024-07-22 16:26:33 发布
阅读量5.2k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1104258464/article/details/54956745
版权

 朋友刚问了一个问题


用JQuery Ajax 请求的时候没有问题，正常请求该接口。

但是换成vue-resouce 时会报如上的错。


后来经过查找发现时 发现是Content-type 问题

vue-resource 请求时候 requests encoded 为 application/json

jquery 请求时候 requests encoded 为 application/x-www-form-urlencoded


所以我们可以让vue-resouece 提交数据的编码和jquery是一样的

在main.js中  设置 Vue.http.options.emulateJSON = true;

还有一种方法是在后台设置 Access-Control-Allow-Headers : Content-Type


下面是vue-resouece 提到的解决方案



地址https://github.com/pagekit/vue-resource/blob/master/docs/config.md#legacy-web-servers


mnixu
关注
专栏目录
VUE中使用Vue-resource完成交互
01-19
vue-resource就像jQuery里的$.ajax，是用来跟后端交互数据的，vue-resource是vue的一个插件，所以我们在开始使用vue之前，需要先引入vue-resource.js这个文件 [removed][removed] [removed][removed] 基本语法 // ...
【Vue】解决“Request header field content-type is not allowed by Access-Control-Allow-Headers”问题
DomCode
06-27 1656
在向用nodejs快速搭建的mock服务器发送请求时出现“Request header field content-type is not allowed by Access-Control-Allow-Headers”报错
Vue和服务端交互的跨域以及Header设值问题解决
琪琪的博客
06-10 8891
    目前我们公司项目在部分翻新，有一个项目是需要从安哥拉1翻新到Vue，翻新过程中碰到了不少的坑，第一个就是跨域问题，其实网上很多资料都有说明Vue跨域问题的解决方式，但是我们采用的是一种一劳永逸的方式，直接去修改Nginx的配置，详细配置看下面即可：if ($request_method = 'OPTIONS') { add_header 'A...
vue3 POST请求中，文件流下载添加responseType: ‘arraybuffer‘的问题
最新发布
weixin_48420104的博客
07-22 455
如果responseType的值改为'blob'，responseType: 'blob' // 确保将响应类型设置为blob，会发现可以下载，但是打开不了。是一个方法，用于发送 POST 请求。你需要将原始的 Axios 请求改写为使用这个代理对象的方法。用于存储请求返回的数据，你可以在模板或其他计算属性中使用它。最后，你可以在组件的适当位置调用。函数，例如在组件的生命周期钩子中，或者在用户触发的事件处理函数中。是假设的，你需要根据你的项目实际情况来调整。方法接受正确的参数，并且能够处理响应类型。
Vue 跨域问题 的几种解决办法 （No ‘Access-Control-Allow-Origin‘ header is present on the requested resource）
日积月累
03-09 5300
No 'Access-Control-Allow-Origin' header is present on the requested resource，
跨域解决方案
fangye1的博客
01-25 2176
参考文章 前端常见跨域解决方案（全） 什么是跨域 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 常见场景： 资源跳转： A链接、重定向、表单提交 资源嵌入： 、浏览器很容易受到XSS、CSFR等攻击，为了安全，浏览器引入了 同源策略/SOP（Same origin policy） 它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 ...
vue 访问后端接口（后端接口框架：ssm）报错 403 No ‘Access-Control-Allow-Origin‘ header解决方案
热门推荐
吴名氏的博客
08-16 16万+
vue 访问后端接口（后端接口框架：ssm）报错 403 No 'Access-Control-Allow-Origin' header解决方案
vue-resource-1.3.4.zip
04-23
vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件，提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和Vue组件实例方法。
vue学习之vue-resource请求
01-07
npm install 引入vue-resource包 this.$http.get(’/someUrl’) this.$http.post(’/someUrl’,{foo:‘bar’}) (1) npm install vue-resource –save引入vue-resource包 (2)在store文件的main.js中配置vue-resource ...
vue-resource-min-1.5.1.js
04-29
vue-resource 各个版本，免费下载 如果下载不了，关注我，评论区联系我 vue-resource是一个用于Vue.js框架的插件，主要用于处理HTTP请求。12 vue-resource提供了多种方式来发起请求，包括使用Vue.http或this.$http...
Vue之axios请求出现类似跨域报错，content-type不被允许
weixin_42447084的博客
07-07 1278
一般，出现了以下错误的时候，有相当一部分开发者会下意识地认为是跨域问题 Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 但当前前后后排查了一下后台跨域设置，发现完全正常啊，那么问题该出现在axios的header或者数据了 因为报错信息中出现 header field Content-Type is not allowed 所以改一下默认的c
vue axios跨域访问相关问题 | axios默认发送‘application/x-www-form-urlencoded‘格式数据 | Content-Type is not allowed b
♡ 脚下的每一步都叫远方 ♡
07-02 1311
文章目录概述报错1 Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon报错2 返回状态码500 好久没更博客了, 最近一直搞框架搞项目, 好多问题也都没有记录下来… 好吧, 那从今天起来, 继续开始保持记录的好习惯, 先写一下在 axios 上踩下了这么多坑. 概述 通过以下两个报错, 来介绍解决使用 axios 来进行网络请求中的遇到的跨域问题 报错一 对应 服务器端需要的处理方式 报错二 对应
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon
Alex
05-06 645
在我们使用Vue框架的时候，我们不免会遇到各种各样的问题。 我的代码如下： let params = { username: this.username, password: this.password, }; // 登录 export const userLogin = (params) => { return Axios.post('http://127.0.0.1:800...
vue项目中已拦截跨源请求：同源策略禁止读取位于....（原因：CORS 请求未能成功）解决方案
南风花海的博客
06-15 5859
手动给Global.asax配置，添加如下方法 最后记得退出所有终端，重新进入终端即可解决跨域报错问题。
Vue解决跨域请求问题，No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
tmd
07-13 3754
1、response设置响应头，让返回数据包中的header中增加允许跨域的信息 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-...
关于跨域响应头Access-Control-Allow-Headers的一些说明
weixin_30666753的博客
05-03 3942
在跨域PreFlight的过程中，Options请求会返回一个响应头，如果服务器返回了这个响应头，则允许用户发起GET、POST、HEAD这三个简单方法的请求，如需发起其他形式的请求则需要显示地在 Access-Control-Allow-Headers请求头中设置允许的请求方法。 跨域详细规范参见如下地址：http://www.w3.org/TR/20...
Vue 权限控制(路由验证)转载
weixin_49302285的博客
07-02 1459
这篇文章简直精辟啊原文 Vue 权限控制(路由验证) - 掘金 (juejin.cn)
VUE3 解决跨域问题 Access-Control-Allow-Origin
LQ_001的博客
03-18 1143
VUE 解决跨域问题 Access-Control-Allow-Origin
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题
qq_42212557的博客
12-06 2万+
No 'Access-Control-Allow-Origin' header is present on the requested resource关于vue跨域问题
vue Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
09-20
错误信息"Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."提示我们在预检请求的响应头中不允许设置"Access-Control-Allow-Origin"。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值