正文

CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4

 2023-03-04  106

关键词：

【中文标题】CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4【英文标题】：CORS Preflight request - Custom auth token in header - Spring and Angular 4 【发布时间】：2018-04-23 23:07:42 【问题描述】：

我在本地服务器上使用令牌作为标头请求简单 GET 时遇到问题。我的浏览器不断通过简单的 GET 请求发送预检请求。

我用 postman / curl 试过了，没有任何问题。

这是实际代码：服务器（春季）：

@Override
public void doFilter(final ServletRequest req, final ServletResponse res,
                     final FilterChain chain) throws IOException, ServletException 
    final HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods",
            "POST, GET, PUT, OPTIONS, DELETE, PATCH");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, x-auth-token, Content-Type");
    response.setHeader("Access-Control-Expose-Headers", "x-auth-token");
    response.setHeader("Access-Control-Allow-Credentials", "true");

    final HttpServletRequest request = (HttpServletRequest) req;

    if (request.getMethod().equals("OPTIONS")) 
        try 
            response.getWriter().print("OK");
            response.getWriter().flush();
         catch (IOException e) 
            e.printStackTrace();
        
     else 
        chain.doFilter(request, response);

所以我的x-auth-token 是一个类似 jwt 的令牌。

在我的 Angular 代码中，我只是将我的令牌添加为 x-auth-token，如下所示：

getAll() 
    return this.http.get('http://127.0.0.1:8080/module', this.jwt()).map((response: Response) => response.json());


private jwt() 
    // create authorization header with jwt token
    let token = localStorage.getItem('user');
    let obj = JSON.parse(token)
    console.log(obj.token.token)
    if (obj.token) 
        let headers = new Headers(
            'x-auth-token': obj.token.token,
            'Content-Type': "application/json"
        );
        return new RequestOptions( headers: headers );

请注意，我的身份验证/注册路由工作正常，我只是无法将我的 x-auth-token 标头传送到我的 Spring 服务器。

我的两个网络服务器都在本地运行：8080 上的 Spring 和 8000 上的 Angular。

任何帮助将不胜感激，

谢谢，

【问题讨论】：

您的令牌应该是string 类型还是json 对象？这是string 您可以在 teamviewer 中使用吗？还是谷歌浏览器远程桌面？感谢您的提问，但我在工作计算机上，无法访问屏幕共享。我可以调试并找出问题 【参考方案1】：

首先，postman 和 curl 不是测试 CORS 的好方法，因为它们不强制执行与标准浏览器相同的源策略。即使在浏览器中失败的情况下，它们也能正常工作。

其次，您的请求被浏览器预先发送的原因是它不是simple request，因为x-auth-token 标头和application/json Content-Type。只有application/x-www-form-urlencoded 简单请求中允许使用 multipart/form-data 和 text/plain 内容类型。

我认为问题出在 OPTION 响应中。确保它包含所有相关的标题。它可能会失败，或者您正在丢失添加的标头，因为您处理它的方式与其他响应不同。

【讨论】：

接受 Express JS 中 CORS 请求的自定义 Http 标头

】接受ExpressJS中CORS请求的自定义Http标头【英文标题】：AcceptcustomHttpHeadersforCORSrequestsinExpressJS【发布时间】：2013-07-0206:58:26【问题描述】：我有一个ExpressJS应用程序通过REST公开一些数据。当我从同一来源或使用curl访问REST接口时... 查看详情

Axios CORS/Preflight 因 Laravel 5.4 API 调用而失败

】AxiosCORS/Preflight因Laravel5.4API调用而失败【英文标题】：AxiosCORS/PreflightfailingwithLaravel5.4APIcall【发布时间】：2018-03-0112:28:42【问题描述】：我在使用Laravel5.4和我的使用Axios处理请求的React应用程序时遇到问题。这是我遇到的错误。... 查看详情

[CORS][Spring Security] PreFlight 请求未处理

】[CORS][SpringSecurity]PreFlight请求未处理【英文标题】：[CORS][SpringSecurity]PreFlightrequestnothandle【发布时间】：2020-06-3020:09:02【问题描述】：前端：React16.12.0|后端：Spring2.2.4.RELEASE我目前面临关于预检CORS请求的问题。据我了解，每个非... 查看详情

对 CORS preflight OPTIONS 请求的响应是 Laravel API 中的 500 Internal Server Error

】对CORSpreflightOPTIONS请求的响应是LaravelAPI中的500InternalServerError【英文标题】：ResponsetoCORSpreflightOPTIONSrequestis500InternalServerErrorinLaravelAPI【发布时间】：2019-10-2721:05:16【问题描述】：我正在开发一个Laravel和Angular项目。项目在另一... 查看详情

Angular Preflight 请求添加标头

】AngularPreflight请求添加标头【英文标题】：AngularPreflightRequesttoAddHeaders【发布时间】：2021-07-0301:28:18【问题描述】：我有这个项目在Angular8中运行，并且确实使用预检和实际API调用了api。由于预检OPTIONS没有标头Strict-Transport-Securit... 查看详情

无法使用 spring mvc 和 $http 访问 CORS 环境中的自定义标头

】无法使用springmvc和$http访问CORS环境中的自定义标头【英文标题】：UnabletoaccessacustomizedheaderinCORSenvironmentusingspringmvcand$http【发布时间】：2017-01-0415:00:52【问题描述】：我对上述问题进行了广泛搜索，但找不到可行的解决方案。... 查看详情

Amazon S3 CORS 标头仅在 OPTIONS（预检）期间显示，而不在 GET 请求期间显示

...期间显示【英文标题】：AmazonS3CORSheadersonlyshowduringOPTIONS(preflight)andnotduringGETrequest【发布时间】：2013-10-3014:39:53【问题描述】：我有一个具有以下CORS配置的S3存储桶。<?xmlversion="1.0"encoding="UTF-8"?> 查看详情

401 响应 CORS preflight OPTIONS 请求到 Spring Boot 服务器

】401响应CORSpreflightOPTIONS请求到SpringBoot服务器【英文标题】：401responseforCORSpreflightOPTIONSrequesttospringbootserver【发布时间】：2021-02-2205:20:53【问题描述】：从我的Angular应用程序到SpringBoot后端的跨域请求被CORS阻止，仅使用POST、PUT。... 查看详情

Web Api 2 Preflight CORS 请求承载令牌

】WebApi2PreflightCORS请求承载令牌【英文标题】：WebApi2PreflightCORSrequestforBearerToken【发布时间】：2015-01-1419:29:50【问题描述】：我有一个带有AngularJS前端和WebApi2后端的网络应用程序，它使用不记名令牌进行身份验证。在FireFox和IE中... 查看详情

已解决 - CORS、OPTIONS 和 PreFlight 问题在 Vue.js 中使用 Axios 使用 REST API

】已解决-CORS、OPTIONS和PreFlight问题在Vue.js中使用Axios使用RESTAPI【英文标题】：SOLVED-CORS,OPTIONSandPreFlightproblemsConsumingRESTAPIwithAxiosinVue.js【发布时间】：2019-11-1710:15:53【问题描述】：TL;DR我的Axios调用的格式存在一些问题，发现在调... 查看详情

javahttp请求中的自定义标头与排球(代码片段)

查看详情

Spring Boot 和 PreFlight 请求

】SpringBoot和PreFlight请求【英文标题】：SpringBootandPreFlightrequests【发布时间】：2018-04-1318:08:49【问题描述】：我正在使用SpringBootversion2.0.0.M5我的JavaScript应用程序在调用我暴露的Rest端点时遇到问题。为了安全起见-我希望传入一个... 查看详情

CORS preflight OPTIONS 请求从 Windows Authenticated web api 返回 401（未授权）

】CORSpreflightOPTIONS请求从WindowsAuthenticatedwebapi返回401（未授权）【英文标题】：CORSpreflightOPTIONSrequestreturns401(Unauthorized)fromWindowsAuthenticatedwebapi【发布时间】：2019-01-0501:45:06【问题描述】：我有一个使用WindowsAuthentication的.NETWebAPI项... 查看详情

cors预检请求详谈

...支持了CORS跨域请求后，前端的请求配置可能会调起CORS的preflight请求，也就是我们所说的预检请求。对CORS不太熟悉的可能会很容易忽视掉这个问题。下面就来说说CORS的preflight请求。CORS的基本用法不在本文讨查看详情

浏览器中的preflight请求-预检请求

参考技术Apreflight，一个cors预检请求，属于options请求。该请求会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时，由浏览器自动发出。利用预检请求，浏览器能够知道当前的服务器是否允许执行即将要进行... 查看详情

如何处理 OPTIONS 请求中的自定义标头

】如何处理OPTIONS请求中的自定义标头【英文标题】：HowtohandlecustomheadersinOPTIONSrequest【发布时间】：2020-05-1516:32:02【问题描述】：我想要的是通过向API的请求发送自定义标头。我有我的反应应用程序作为客户端和一个快速应用程... 查看详情

导致 PREFLIGHT 的 HTTP 标头 - 澄清？

】导致PREFLIGHT的HTTP标头-澄清？【英文标题】：HTTPheaderswhichcausePREFLIGHT-Clarification?【发布时间】：2015-12-2401:43:22【问题描述】：简单请求是满足以下条件的请求：HTTP方法匹配（区分大小写）以下之一：头获取发布HTTP标头匹配（... 查看详情

Wordpress 中的 CORS 标头

...遇到了一些困难。这是我在控制台中遇到的错误：*跨域请求被阻止：同源策略不允许读取远程资源在http://fonts.gstatic.com/s/raleway/v10/0dTEPzkLWceF7z0koJaX1A.woff 查看详情

正文