记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

HollisChuang 发布于2019-08-23 12:28 / 901人阅读

摘要：我通过这篇文章把今天工作中遇到的跨域和请求的一个坑记录下来。预检请求机制的使用，是为了避免跨域请求对服务器的用户数据产生未预期的影响。我使用了认证方式，这种方式不会造成该请求成为一个需要预检的请求，所以最后跨域成功了。

我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来。

场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务。域名b上的服务也是我开发的，因此我将域名a加到了该服务的HTTP响应结构的头文件里，这样就允许了域名a上的JavaScript代码用AJAX访问域名b的服务。

域名b上的服务是一个Servlet，允许域名a跨域访问的代码就一行：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// 做业务逻辑

         response.setHeader("Access-Control-Allow-Origin", "域名a");

}

我在域名a的Web应用里用AJAX发起服务请求：

执行后，发现并没有显示200的弹出窗口。

错误消息：Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

观察Chrome开发者工具，发现其实域名b的服务已经成功执行了，确实返回了200的Status code，

而且我已经从Chrome开发者工具里观察到浏览器已经成功接到域名b发送回来的请求了。

那这个错误是什么鬼呢？根据错误消息“Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response” Google了一下，发现一些朋友遇到同样的问题：

1. 如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

网页地址： https://www.cnblogs.com/caimu...

这位朋友的解决方案：

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;

}

但我试过，在我的场景下还是不工作，因为我的例子里，服务器已经针对OPTIONS请求返回HTTP 200的状态码了。

2. 这个Stackoverflow的帖子里，很多朋友都提供了自己的解决方案。

https://stackoverflow.com/que...

我一一试过，在我的场景里都不能工作。

于是我查询了Mozilla的一篇文档：HTTP访问控制（CORS）

https://developer.mozilla.org...

里面谈到了，在某些情况下，浏览器在发起“需要预检的请求”之前，必须首先发起一个“预检请求（Preflight）”到服务器，以探测服务器是否允许这个实际请求。"预检请求"机制的使用，是为了避免跨域请求对服务器的用户数据产生未预期的影响。

那么哪些请求算作“需要预检的请求”呢？Mozilla的这篇文档定义得很清楚：

当请求满足下述任一条件时，即应首先发送预检请求：

使用了下面任一 HTTP 方法：

PUT

DELETE

CONNECT

OPTIONS

TRACE

PATCH

人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：

Accept-Language

Content-Language

Content-Type (but note the additional requirements below)

DPR

Downlink

Save-Data

Viewport-Width

Width

Content-Type 的值不属于下列之一:

application/x-www-form-urlencoded

multipart/form-data

text/plain

我再检查我的代码，因为我在HTTP请求里用xhr.setRequestHeader("Authorization", "用户名:密码的base64编码" )添加了用于Basic Authentication的头部，因此迫使该请求成为了“需要预检的请求”，所以才有了OPTION请求的发送。

现在我将其注释掉：

这次遇到了401 Unauthorized错误了：

然而没有预检请求OPTION发出来了，请求类型变成了我期望的POST方式了。

但是现在就陷入了一个矛盾的境地：如果在请求头部加上Basic Authentication的信息，会遇到错误消息“Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.”。如果去掉，虽然避免了预检请求，但是又遇到401 Unauthorized错误了。

于是，我换了一种认证方式，终于成功实现了期望的跨域请求，在我域名a的前端应用里打印出了来自于域名b的服务的响应。

我使用了form认证方式，这种方式不会造成该请求成为一个”需要预检的请求“，所以最后跨域成功了。

var formData = new FormData();

formData.append("sap-client", "001");

formData.append("sap-user", "用户名");

formData.append("sap-password", "用户密码");

var request = new XMLHttpRequest();

request.open("POST", "域名b的url",false);

request.send(formData);

alert("response: " + request.responseText);

希望我的这个踩坑经历对大家有点帮助。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

专线服务云服务器 js请求数据遇到的问题吗 php开发遇到的难点在工作遇到 ddos 攻击你是如何解决的跨域请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98561.html

HTTP基本知识、跨域和调试技巧

摘要：发送到后台的数据见下图这种方式会以键值对的形式通过分隔符链接，以字符串给后台，可以传输文件，也可以传输普通数据。跨域跨域问题的根本问题就是同源策略，旨在防止网站被攻击，这里不做赘述。客户端，以为例服务端允许跨域的请求的方法。 HTTP基础其实很多面试问HTTP的3次握手，4次挥手，我觉得价值不大，可以帮助你理解HTTP的原理，死背硬记的对于你开发没有作用，而是去理解它就行。前端只关心...

starsfun 2019-08-23 16:55 评论0 收藏0
一次跨域请求出现 OPTIONS 请求的问题及解决方法

摘要：实际使用时，由于向提交的长度限制在字符，超过了则被浏览器拒绝，因此不采用。前端发起跨域请求就是正常的请求即可。问题背景浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域在前后端开发过程经常会遇到跨域问题。网上也都有解决方案。写这篇文章时，我们碰到的一个场景是：要给s系统做一个扩展，前端的html、js放在s系统里，后端需要做一个单独的站点N.B....

余学文 2019-08-23 11:29 评论0 收藏0
基于 HTTP 请求拦截，快速解决跨域和代理 Mock

摘要：今天这篇文章，我们会介绍几种常见的方法和其中存在的问题，并提出如何基于请求拦截，快速解决跨域和代理问题的方案。因为没有修改该请求，只是延迟发送，这样就保持了原请求与业务服务器之间的所有鉴权等相关信息，由此解决了跨域访问无法携带的问题。近几年，随着 Web 开发逐渐成熟，前后端分离的架构设计越来越被众多开发者认可，使得前端和后端可以专注各自的职能，降低沟通成本，提高开发效率。在前后端...

dreamGong 2019-08-26 13:36 评论0 收藏0
分享一下这两周爬微信支付的坑~希望有借鉴作用（PHP）

摘要：这个坑就是要注意回调结束要返回成功的响应这几天做微信支付暂时遇到的问题就这么多，只能说注意细节吧，爬过的坑记录下来以后遇到就懂处理了。前言其实任何接口开发只要按照给出来的接口文档和例子开发基本上不会有太大问题的，一些问题都是出在杂七杂八的小细节上，现在分享一下微信支付开发中自己遇到的小细节。按照文档做完开发前配置，比如JS安全域名配置、网页授权域名、公众号授权目录等等... 坑一：...

Tangpj 2019-06-28 14:40 评论0 收藏0
跨域问题的一次深入研究

摘要：前言最近在业务代码中深受跨域问题困扰，因此特别写一篇博客来记录一下自己对跨域的理解以及使用到的参考资料。内嵌式跨域通常也是允许的。而我使用时因为这个响应报文最后被认为是跨域问题，无法从中获得的状态码。它代表服务器支持跨域时携带认证信息。前言最近在业务代码中深受跨域问题困扰，因此特别写一篇博客来记录一下自己对跨域的理解以及使用到的参考资料。本文的项目背景基于vue+vuex+axio...

X_AirDu 2019-08-15 17:53 评论0 收藏0