热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AngularGET请求:预检请求已中止-AngularGETrequest:preflightrequestaborted

ImusingAngular1.4.8togetdatafromRESTfullAPI.Foruserauthenticationwedecidedtousecus

I'm using Angular 1.4.8 to get data from RESTfull API. For user authentication we decided to use custom HTTP header:

我正在使用Angular 1.4.8从RESTfull API获取数据。对于用户身份验证,我们决定使用自定义HTTP标头:

 var requestCOnfig= {
  headers: {
      "authorization-token": "A317C3D6-74B1-DA99-FE55-8141E95D3085"
  }
};

Now, I'm trying to make a GET request:

现在,我正在尝试发出GET请求:

 $http.get(config.apiUrl+'/api/v1/orders/', requestConfig).success(function(data){
        table.orders = data;
    });

And see the following requests in Firebug:

并在Firebug中查看以下请求:

enter image description here

I read that browsers make these pre-flight OPTIONS request if you trying to get data from another server. In my case Angular application is on 127.0.0.1:80 and Node.js server is on 127.0.0.1:6673, so it's cross-origin request as I understand

我读过如果你试图从另一台服务器获取数据,浏览器会发出这些飞行前的OPTIONS请求。在我的情况下,Angular应用程序在127.0.0.1:80上,而Node.js服务器在127.0.0.1:6673上,所以它是跨源请求,据我所知

If you try to make OPTIONS request from curl you will get this response:

如果您尝试从curl发出OPTIONS请求,您将收到以下响应:

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Cache-Control, Pragma, Origin,  
Authorization, Content-Type, X-Requested-With, authorization-token
Access-Control-Allow-Methods: GET, PUT, POST, OPTIONS
Allow: GET,HEAD,POST
Content-Type: text/html; charset=utf-8
Content-Length: 13
ETag: W/"d-7cCV5tLYsy8ebraCH4f8nQ"
Date: Thu, 24 Mar 2016 19:56:49 GMT
Connection: keep-alive

So, my questions are:

所以,我的问题是:

1) Why OPTIONS request is not called if I remove custom HTTP header?

1)如果我删除自定义HTTP标头,为什么不调用OPTIONS请求?

2) What is missing in OPTIONS response, why it's aborted?

2)OPTIONS响应中缺少什么,为什么它被中止?

UPD:

Here are headers from original GET request. I can not see OPTIONS headers though.

这是来自原始GET请求的标题。我虽然看不到OPTIONS标题。

enter image description here

UPD2:

I was able to get this error message from Chrome dev tool for OPTIONS request:

我能够从Chrome开发工具中获取OPTIONS请求的此错误消息:

net::ERR_CONNECTION_REFUSED

1 个解决方案

#1


0  

Why OPTIONS request is not called if I remove custom HTTP header?

如果删除自定义HTTP标头,为什么不调用OPTIONS请求?

Custom HTTP headers are one of the triggers for requiring a preflight.

自定义HTTP标头是需要预检的触发器之一。

In particular, a request is preflighted if:

特别是,如果出现以下情况,请求会被预检:

  • It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.
  • 它使用GET,HEAD或POST以外的方法。此外,如果POST用于发送具有除application / x-www-form-urlencoded,multipart / form-data或text / plain之外的Content-Type的请求数据,例如,如果POST请求使用application / xml或text / xml将XML有效负载发送到服务器,则该请求将被预检。

  • It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)
  • 它在请求中设置自定义标头(例如,请求使用标头,如X-PINGOTHER)

MDN


推荐阅读
  • 【实例简介】本文详细介绍了如何在PHP中实现微信支付的退款功能,并提供了订单创建类的完整代码及调用示例。在配置过程中,需确保正确设置相关参数,特别是证书路径应根据项目实际情况进行调整。为了保证系统的安全性,存放证书的目录需要设置为可读权限。值得注意的是,普通支付操作无需证书,但在执行退款操作时必须提供证书。此外,本文还对常见的错误处理和调试技巧进行了说明,帮助开发者快速定位和解决问题。 ... [详细]
  • 在使用SSH框架进行项目开发时,经常会遇到一些常见的问题。例如,在Spring配置文件中配置AOP事务声明后,进行单元测试时可能会出现“No Hibernate Session bound to thread”的错误。本文将详细探讨这一问题的原因,并提供有效的解决方案,帮助开发者顺利解决此类问题。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 本文介绍了如何在 Spring Boot 项目中使用 spring-boot-starter-quartz 组件实现定时任务,并将 cron 表达式存储在数据库中,以便动态调整任务执行频率。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • Android 构建基础流程详解
    Android 构建基础流程详解 ... [详细]
  • 本文探讨了如何通过编程手段在Linux系统中禁用硬件预取功能。基于Intel® Core™微架构的应用性能优化需求,文章详细介绍了相关配置方法和代码实现,旨在帮助开发人员有效控制硬件预取行为,提升应用程序的运行效率。 ... [详细]
  • 为了在Hadoop 2.7.2中实现对Snappy压缩和解压功能的原生支持,本文详细介绍了如何重新编译Hadoop源代码,并优化其Native编译过程。通过这一优化,可以显著提升数据处理的效率和性能。此外,还探讨了编译过程中可能遇到的问题及其解决方案,为用户提供了一套完整的操作指南。 ... [详细]
  • 在Java基础中,私有静态内部类是一种常见的设计模式,主要用于防止外部类的直接调用或实例化。这种内部类仅服务于其所属的外部类,确保了代码的封装性和安全性。通过分析JDK源码,我们可以发现许多常用类中都包含了私有静态内部类,这些内部类虽然功能强大,但其复杂性往往让人感到困惑。本文将深入探讨私有静态内部类的作用、实现方式及其在实际开发中的应用,帮助读者更好地理解和使用这一重要的编程技巧。 ... [详细]
  • 深入探索HTTP协议的学习与实践
    在初次访问某个网站时,由于本地没有缓存,服务器会返回一个200状态码的响应,并在响应头中设置Etag和Last-Modified等缓存控制字段。这些字段用于后续请求时验证资源是否已更新,从而提高页面加载速度和减少带宽消耗。本文将深入探讨HTTP缓存机制及其在实际应用中的优化策略,帮助读者更好地理解和运用HTTP协议。 ... [详细]
  • 本文详细介绍了在Linux系统上编译安装MySQL 5.5源码的步骤。首先,通过Yum安装必要的依赖软件包,如GCC、GCC-C++等,确保编译环境的完备。接着,下载并解压MySQL 5.5的源码包,配置编译选项,进行编译和安装。最后,完成安装后,进行基本的配置和启动测试,确保MySQL服务正常运行。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 本文深入探讨了在Spring Boot中处理RESTful风格的表单请求的方法,包括请求参数处理、请求映射以及RESTful设计原则的应用。文章详细介绍了如何利用HTTP动词(如GET、POST、PUT、DELETE)来操作资源,并结合Spring Boot的注解(如@GetMapping、@PostMapping等)实现高效、清晰的请求处理逻辑。通过实例分析,展示了如何在实际项目中应用这些技术,提高开发效率和代码可维护性。 ... [详细]
  • 利用 Python 中的 Altair 库实现数据抖动的水平剥离分析 ... [详细]
author-avatar
手机用户2502941011
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有