axios/ajax 请求头部添加自定义字段报错(has been blocked by CORS policy: Request header field authorization is ...

这篇具有很好参考价值的文章主要介绍了axios/ajax 请求头部添加自定义字段报错(has been blocked by CORS policy: Request header field authorization is ...。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

axios/ajax 请求头部添加自定义字段报错(has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.)

这个错误是由于浏览器的安全机制所引起的,即跨域资源共享(CORS)策略。当浏览器发现一个跨域请求时,会发送一个预检请求(Preflight Request)来确认服务器是否允许跨域请求。在预检请求中,浏览器会检查请求头中的字段是否被服务器允许。如果请求头中包含了服务器不允许的字段,就会报错。

解决方法:

在服务器端的响应头中添加Access-Control-Allow-Headers字段,指定允许的请求头字段,包括自定义的字段。例如:

Access-Control-Allow-Headers: authorization, content-type, custom-header

php:

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:x-requested-with,content-type,Authorization');
header("Access-Control-Request-Headers: Origin, -Requested-With, content-Type, Accept, Authorization");

其中,custom-header是你自定义的请求头字段。

如果你无法修改服务器端的响应头,可以尝试使用代理服务器来转发请求,或者使用JSONP等其他跨域方式来解决问题。文章来源地址https://www.toymoban.com/news/detail-604026.html

到了这里,关于axios/ajax 请求头部添加自定义字段报错(has been blocked by CORS policy: Request header field authorization is ...的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ajax 与 Axios 异步请求

    1. 网页中如何请求数据 2. 资源的请求方式 客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。 get 请求通常用于获取服务端资源(向服务器要资源) post 请求通常用于向服务器提交数据(往服务器发送资源) 1. 什么是Ajax 2. 为什么要学

    2024年03月28日
    浏览(40)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(38)
  • HTTP 请求头部字段中 connection - keep-alive 的含义

    我们经常可以在 Chrome 开发者工具 network 标签页里,观察到 HTTP 请求的 request headers 字段,包含 Connection 等于 keep-alive 这样的值。 上图是 SAP Spartacus UI 向后台 Commerce Cloud 服务器发起的 OCC API 调用。 启用 Keep-Alive 有助于优化网站的性能并提供更好的用户体验。 它允许访问者的

    2024年02月15日
    浏览(32)
  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(30)
  • 前端如何中断请求 ( axios、原生 ajax、fetch)

    使用场景 在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景: 比如 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这

    2024年02月04日
    浏览(34)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(32)
  • Vue的Ajax请求-axios、前后端分离练习

    ​ Axios,是Web数据交互方式,是一个基于promise [5]的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 [2] axios :不是vue的插件,可以在任何地方使用

    2024年02月11日
    浏览(34)
  • 同步_异步请求和Ajax并利用axios框架简化

    目录 同步和异步 原生的Ajax 创建XMLHttpRequest对象 常用方法 常用属性 axios框架 同步请求:发送请求后,会做出回应,回应的内容会覆盖浏览器中的内容,这样会打断其他正常的操作,显得不太友好,并且请求时会携带所有的信息。 异步请求:前端正常输入时,可以同时与后端

    2024年02月13日
    浏览(26)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包