尝试从 REST API 获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

技术标签:

【中文标题】尝试从 REST API 获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 【发布时间】：2021-05-27 15:35:28 【问题描述】：

我正在尝试从 HP Alm 的 REST API 中获取一些数据。它适用于一个小的 curl 脚本 - 我得到了我的数据。

现在使用 javascript、fetch 和 ES6（或多或少）似乎是一个更大的问题。我不断收到此错误消息：

Fetch API 无法加载。对预检请求的响应不通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。原点“http://127.0.0.1:3000”是因此不允许访问。响应具有 HTTP 状态代码 501。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 来获取禁用 CORS 的资源。

我知道这是因为我试图从本地主机中获取该数据，并且解决方案应该使用 CORS。现在我以为我确实做到了，但不知何故，它要么忽略了我在标题中写的内容，要么问题出在其他问题上？

那么，是否存在实施问题？我做错了吗？不幸的是，我无法检查服务器日志。我真的有点卡在这里了。

function performSignIn() 

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, 
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    )
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));

我正在使用 Chrome。我也尝试使用该 Chrome CORS 插件，但随后我收到另一条错误消息：

响应中“Access-Control-Allow-Origin”标头的值当请求的凭证模式为 '包括'。因此不允许使用原点“http://127.0.0.1:3000” 使用权。发起请求的凭证模式 XMLHttpRequest 由 withCredentials 属性控制。

【问题讨论】：

【参考方案1】：

这个答案涉及很多方面，所以分为三个部分：

如何使用 CORS 代理解决“No Access-Control-Allow-Origin header” 问题如何避免 CORS 预检如何解决“Access-Control-Allow-Origin 标头不能是通配符”问题

如何使用 CORS 代理来避免“No Access-Control-Allow-Origin header”问题

如果您不控制前端代码向其发送请求的服务器，并且该服务器的响应问题只是缺少必要的 Access-Control-Allow-Origin 标头，您仍然可以让事情正常工作——通过通过 CORS 代理发出请求。

您可以使用来自https://github.com/Rob--W/cors-anywhere/ 的代码轻松运行自己的代理。您还可以在 2-3 分钟内轻松地将自己的代理部署到 Heroku，只需 5 个命令：

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

运行这些命令后，您将拥有自己的 CORS Anywhere 服务器，例如，https://cryptic-headland-94862.herokuapp.com/。

现在，在您的请求 URL 前加上代理的 URL：

https://cryptic-headland-94862.herokuapp.com/https://example.com

将代理 URL 添加为前缀会导致请求通过您的代理发出，其中：

https://example.com

Access-Control-Allow-Origin

然后浏览器允许前端代码访问响应，因为带有Access-Control-Allow-Origin 响应标头的响应是浏览器看到的。

即使请求是触发浏览器执行 CORS 预检 OPTIONS 请求的请求，这也有效，因为在这种情况下，代理还会发送使预检成功所需的 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 标头。

如何避免 CORS 预检

问题中的代码触发 CORS 预检 - 因为它发送 Authorization 标头。

https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

即使没有，Content-Type: application/json 标头也会触发预检。

什么“预检”的意思是：在浏览器尝试问题代码中的POST之前，它首先向服务器发送一个OPTIONS请求，以确定服务器是否选择接收交叉-具有Authorization 和Content-Type: application/json 标头的来源POST。

一个小的 curl 脚本可以很好地工作 - 我得到了我的数据。

要正确使用curl 进行测试，您必须模拟浏览器发送的预检OPTIONS：

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"

...https://the.sign_in.url 替换为您的实际sign_in URL。

浏览器需要来自 OPTIONS 请求的响应必须具有如下标头：

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization

如果OPTIONS 响应不包含这些标头，浏览器将停在那里并且永远不会尝试发送POST 请求。此外，响应的 HTTP 状态码必须是 2xx，通常是 200 或 204。如果是任何其他状态码，浏览器就会停在那里。

问题中的服务器以 501 状态代码响应 OPTIONS 请求，这显然意味着它试图表明它不支持 OPTIONS 请求。在这种情况下，其他服务器通常会以 405“不允许的方法”状态码进行响应。

因此，如果服务器以 405 或 501 或除 200 或 204 以外的任何值来响应 OPTIONS 请求，或者如果不使用那些必要的响应标头进行响应。

避免为问题中的案例触发预检的方法是：

如果服务器不需要 Authorization 请求标头，而是依赖嵌入在 POST 请求正文中或作为查询参数的身份验证数据如果服务器不要求POST 主体具有Content-Type: application/json 媒体类型，而是接受POST 主体作为application/x-www-form-urlencoded 并带有一个名为json（或其他）的参数，其值为JSON 数据

如何解决“Access-Control-Allow-Origin 标头不能是通配符”问题

_{我收到另一条错误消息：}

_{响应中“Access-Control-Allow-Origin”标头的值}_{当请求的凭证模式为时，不能是通配符“*”}_{“包括”。因此不允许访问源“http://127.0.0.1:3000”}_。_{XMLHttpRequest发起的请求的凭证模式由withCredentials属性控制。}

对于具有凭据的请求，如果 Access-Control-Allow-Origin 标头的值为 *，浏览器不会让您的前端 JavaScript 代码访问响应。相反，这种情况下的值必须与前端代码的来源http://127.0.0.1:3000 完全匹配。

请参阅 MDN HTTP 访问控制 (CORS) 文章中的 Credentialed requests and wildcards。

如果您控制要向其发送请求的服务器，处理这种情况的常用方法是将服务器配置为获取 Origin 请求标头的值，并将其回显/反射回该值Access-Control-Allow-Origin 响应头；例如，使用 nginx：

add_header Access-Control-Allow-Origin $http_origin

但这只是一个例子；其他（网络）服务器系统也有类似的方式来回显原始值。

我正在使用 Chrome。我也尝试使用那个 Chrome CORS 插件

Chrome CORS 插件显然只是简单地将Access-Control-Allow-Origin: * 标头注入浏览器看到的响应中。如果插件更智能，它会做的是将那个虚假的 Access-Control-Allow-Origin 响应头的值设置为前端 JavaScript 代码的实际来源 http://127.0.0.1:3000。

所以避免使用那个插件，即使是为了测试。这只是一种干扰。要在没有浏览器过滤的情况下测试您从服务器获得的响应，您最好使用上面的curl -H。

就问题中fetch(…) 请求的前端JavaScript 代码而言：

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

删除这些行。 Access-Control-Allow-* 标头是 response 标头。你永远不想在请求中发送它们。这样做的唯一效果是触发浏览器进行预检。

【讨论】：

极好的答案，我的问题是远程服务器没有响应 OPTIONS 请求，所以在摆弄请求和标头似乎很长时间之后，我通过删除标头 Content-Type 和 Access-Control-Allow-Origin 解决了它- 谢谢！一个常见问题的绝妙答案。 FWIW，当向请求添加“授权：承载”标头时，我们让服务器响应 405（不支持方法），因此修复是将令牌移动到 POST 字段，而不是控制服务器对 OPTIONS 检查的响应是在客户给定的时间范围内是不可能的。实际上在将新版本的扩展上传到 Azure DevOps 后，您必须在添加新范围时在 dev.azure.comyour_organization/_settings/extensions?tab=installed 中为其更新权限“ scopes": ["vso.build"] 在清单文件中。 https://cors-anywhere.herokuapp.com/ 现在不再可用。客户端现在将收到 403 Forbidden 错误 - 除非开发人员明确请求暂时通过。这是公告：github.com/Rob--W/cors-anywhere/issues/301。我建议从答案中删除 cors-anywhere 引用，因为它不再有用。 @BoghyonHoffmann 非常感谢您的提醒。我已相应地修改了答案——如果您认为需要进一步更改，请查看并告诉我。【参考方案2】：

当客户端 URL 和服务器 URL 不匹配时会发生此错误，包括端口号。在这种情况下，您需要为跨源资源共享的 CORS 启用服务。

如果您托管的是 Spring REST 服务，那么您可以在博文中找到它CORS support in Spring Framework。

如果您使用 Node.js 服务器托管服务，那么

npm install cors --save

const cors=require("cors");
const corsOptions =
   origin:'*', 
   credentials:true,            //access-control-allow-credentials:true
   optionSuccessStatus:200,


app.use(cors(corsOptions)) // Use this after the variable declaration

【讨论】：

including the port number :( 注意：您还需要从客户端的fetch() 选项中删除您的mode: 'no-cores' 设置。除非您的请求中有 mode: 'cores'，否则您的 JSON 正文不会被发送。拜托，我可以请你支持这个***.com/questions/67963038/… 这个问题实际上是关于提出请求的。那么假设您无权访问 REST 服务器？有没有办法提出请求？【参考方案3】：

删除这个：

credentials: 'include',

【讨论】：

【参考方案4】：

使用dataType: 'jsonp' 为我工作。

   async function get_ajax_data()
       var _reprojected_lat_lng = await $.ajax(
                                type: 'GET',
                                dataType: 'jsonp',
                                data: ,
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) 
                                    console.log(jqXHR)
                                ,
                                success: function (data) 
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                
                            );


  // function

【讨论】：

【参考方案5】：

我正在使用 Spring REST，我解决了它，将 AllowedMethods 添加到 WebMvcConfigurer 中。

@Value( "$app.allow.origins" )
    private String allowOrigins;
@Bean
public WebMvcConfigurer corsConfigurer() 
    System.out.println("allow origin: " + allowOrigins);
    return new WebMvcConfigurerAdapter() 
        @Override
        public void addCorsMappings(CorsRegistry registry) 
            registry.addMapping("/**")
            //.allowedOrigins("http://localhost")
            .allowedOrigins(allowOrigins)
            .allowedMethods("PUT", "DELETE","GET", "POST");
        
    ;

【讨论】：

【参考方案6】：

问题出现是因为您在前端添加了以下代码作为 request 标头：

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

这些标头属于响应，而不是请求。所以删除他们，包括这一行：

headers.append('GET', 'POST', 'OPTIONS');

您的请求有 'Content-Type: application/json'，因此触发了所谓的 CORS 预检。这导致浏览器使用 OPTIONS 方法发送请求。有关详细信息，请参阅CORS preflight。

因此，在您的后端中，您必须通过返回响应标头来处理此预检请求，其中包括：

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

当然，实际语法取决于您用于后端的编程语言。

在你的前端，应该是这样的：

function performSignIn() 
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, 
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    )
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed: ' + error.message));

【讨论】：

这应该是最佳答案 - 我真的不喜欢绕过 CORS 的想法，尤其是通过第三方路由它。嘿，请问'Header()' 是什么？ @mitsu 如果您参考以下行：let headers = new Headers();上面，那么它是 fetch API 的一个接口，用于对 http 请求或响应标头进行操作。请访问developer.mozilla.org/en-US/docs/Web/API/Headers 获取详细信息以及使用示例。【参考方案7】：

就我的两分钱......关于如何使用 CORS 代理来解决“没有Access-Control-Allow-Origin 标头”问题

对于那些在后端使用 php 的人来说，部署“CORS 代理”很简单：

创建一个名为“no-cors.php”的文件，内容如下：

$URL = $_GET['url'];
echo json_encode(file_get_contents($URL));
die();

在您的前端，执行以下操作：

fetch('https://example.com/no-cors.php' + '?url=' + url)
  .then(response=>*/Handle Response/*)`

【讨论】：

【参考方案8】：

在我的例子中，网络服务器阻止了“OPTIONS”方法

检查您的网络服务器的选项方法

阿帕奇：https://www-01.ibm.com/support/docview.wss?uid=ibm10735209 web 层：4.4.6 禁用选项方法https://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174 nginx: https://medium.com/@hariomvashisth/cors-on-nginx-be38dd0e19df

我正在使用“网络层”

/www/webtier/domains/[域名]/config/fmwconfig/components/OHS/VCWeb1/httpd.conf

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %REQUEST_METHOD ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

改成

<IfModule mod_rewrite.c>
  RewriteEngine off
  RewriteCond %REQUEST_METHOD ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

【讨论】：

【参考方案9】：

就我而言，我使用以下解决方案。

前端或 Angular

post(
    this.serverUrl, dataObjToPost,
    
      headers: new HttpHeaders(
           'Content-Type':  'application/json',
         )
    
)

后端（我使用 PHP）

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

【讨论】：

【参考方案10】：

如果你在macOS的开发环境中使用Node.js和Express.js作为后端，React和Axios作为前端，你需要在@下运行双方987654326@。以下是最终对我有用的方法（经过数小时的深入研究和测试）：

第 1 步：创建 SSL 证书

只需按照 How to get HTTPS working on your local development environment in 5 minutes 的步骤操作即可。

您最终会得到几个文件，用作运行 HTTPS 服务器和 React Web 的凭据：

server.key & server.crt

您需要将它们复制到前端和后端的根文件夹中（在生产环境中，您可以考虑将它们复制到文件夹./ssh中后端）。

第 2 步：后端设置

我阅读了很多建议使用'cors'包甚至设置（'Access-Control-Allow-Origin'，'*'）的答案，这就像说：“欢迎黑客访问我的网站”。就这样做吧：

import express from 'express';
const emailRouter = require('./routes/email');  // in my case, I was sending an email through a form in React
const fs = require('fs');
const https = require('https');

const app = express();
const port = 8000;

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests
app.all('*', (req, res, next) => 
    res.header("Access-Control-Allow-Origin", "https://localhost:3000");
    next();
);

// Routes definition
app.use('/email', emailRouter);

// HTTPS server
const credentials = 
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
;

const httpsServer = https.createServer(credentials, app);
httpsServer.listen(port, () => 
    console.log(`Back-end running on port $port`);
);

如果您想测试 https 是否正常，可以将 httpsServer 常量替换为以下值：

https.createServer(credentials, (req: any, res: any) => 
  res.writeHead(200);
  res.end("hello world from SSL\n");
).listen(port, () => 
  console.log(`HTTPS server listening on port $port...`);
);

然后从网络浏览器访问它：https://localhost:8000/

第 3 步：前端设置

这是来自 React 前端的 Axios 请求：

    await axios.get(`https://localhost:8000/email/send`, 
        params:  /* Whatever data you want to send */ ,
        headers: 
            'Content-Type': 'application/json',
        
    )

现在，您需要使用我们已经创建的 SSL 凭据以 HTTPS 模式启动您的 React Web。在您的 macOS 终端中输入：

HTTPS=true SSL_CRT_FILE=server.crt SSL_KEY_FILE=server.key npm start

此时，您从前端的 3000 端口从 HTTPS 连接发送请求，后端通过 8000 端口的 HTTPS 连接接收该请求。 CORS 应该对此感到满意；）

【讨论】：

【参考方案11】：

对于Node.js，如果您使用的是路由器，请确保在路由器之前添加 CORS。否则，您仍然会收到 CORS 错误。如下：

const cors = require('cors');

const userRouter = require('./routers/user');

expressApp = express();
expressApp.use(cors());
expressApp.use(express.json());
expressApp.use(userRouter);

【讨论】：

【参考方案12】：

添加mode:no-cors可以避免API中出现CORS问题。

fetch(sign_in, 
        mode: 'no-cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    )
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));

【讨论】：

【参考方案13】：

尝试在下面的代码中添加所有这些标头在每个路由之前，您在应用中定义，而不是在路由之后

app.use((req, res, next) =>
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type,Accept, Authortization');  
res.setHeader('Acces-Control-Allow-Methods','GET, POST, PATCH, DELETE');

【讨论】：

【参考方案14】：

如果您在将 React 应用程序部署到 netlify 时遇到此错误，请使用以下步骤。

第 1 步：在 react 应用的根文件夹中创建 netlify.toml 文件。

第 2 步：复制粘贴此代码：

`[[redirects]]
    from = "/cors-proxy/*"
    to = ":splat"
    status = 200
    force = true`

第 3 步：以这种方式更新您的 fetch/axios api：

我花了一段时间才弄明白。

【讨论】：

【参考方案15】：

使用下面的 npm 模块。这实际上挽救了生命。

https://www.npmjs.com/package/local-cors-proxy

您收到 CORS 错误，例如下面的 URL

https://www.google.co.in/search/list

成功安装后（local-cors-proxy）全局npm install -g local-cors-proxy 并设置代理URL 为CORS URL。例如，下面的 CORS 问题进入 localhost。所以你需要为CORS问题域添加域名和端口。

lcp --proxyUrl https://www.google.co.in --port 8010

设置成功后会生成如下所示的本地代理URL。

http://localhost:8010/proxy

在您的项目 API URL 中使用该域名。

API 完整网址：

http://localhost:8010/proxy/search/list

在您的本地项目中获得没有 CORS 问题响应。

【讨论】：

嗨，我正在尝试这个包，因为我正在执行从运行在 localhost:5000 上的 Flutter Web 应用程序到运行在 localhost:3000 上的 Node.js 服务器的请求。所以在我的情况下，我应该在脚本中输入"proxy": "lcp --proxyUrl http://localhost --port 3000"并向localhost:3000/proxy提出请求，对吗？我仍然收到'No 'Access-Control-Allow-Origin' header is present on the requested resource.' 错误.. 我做错了什么还是它无法从本地主机到本地主机？非常感谢实际上？不是字面意思吗？这部分是不可理解的，例如靠近 “以下 CORS 问题进入 localhost”。你能fix吗？（但是没有“编辑：”、“更新：”或类似的 - 问题/答案应该看起来好像是今天写的。）【参考方案16】：

如果您的 API 是用ASP.NET Core 编写的，请按照以下步骤操作：

安装 Microsoft.AspNetCore.Cors 包。

在文件 Startup.cs 的 ConfigureServices 方法中添加以下行：

services.AddCors();

在文件 startup.cs 的 Configure 方法中添加以下行：

app.UseCors(options =>
     options.WithOrigins("http://localhost:8080")
            .AllowAnyHeader()
            .AllowAnyMethod());

确保在之前添加这个 - app.UseRouting();

【讨论】：

【参考方案17】：

CORS 问题的可能原因

检查您的服务器端 access 标头：Refer to this link

在浏览器中检查从服务器接收到的请求标头。下图显示了标题

如果您使用fetch 方法并尝试访问跨域请求，请确保mode:cors 存在。参考这个link

有时如果程序中存在问题，您也会遇到 CORS 问题，因此请确保您的代码正常运行。

确保在您的 API 中处理 OPTION 方法。

【讨论】：

【参考方案18】：

在过去几年中，我多次遇到此错误 - 似乎突然出现在以前正常运行的网站中。

我确定 Chrome（可能还有其他浏览器）可以在服务器上发生一些不相关的错误导致其无法处理 CORS 请求（并且在返回 HTTP 500 错误之前）时返回此错误。

这些都发生在.NET Core环境中，我不确定是否会发生在其他环境中。

无论如何，如果您的代码以前运行过，并且看起来是正确的，请考虑调试以找出是否存在其他错误，然后再疯狂地尝试解决实际上并不存在的错误。

【讨论】：

（谢谢）^ 10【参考方案19】：

对于Node.js 和Express.js 后端，我使用这个:)

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // Update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
);

更多详情：CORS on ExpressJS

【讨论】：

【参考方案20】：

当客户端从他的主机username.companyname.com调用我们的后端服务时，他曾经得到上述错误

需要两件事：

在发回响应时，发送键为Access-Control-Allow-Origin且值为*的标头：

 context.Writer.Header()["Access-Control-Allow-Origin"] = []string"*" // Important to avoid a CORS error

使用Go CORS 库将 AllowCredentials 设置为 false 并将 AllowAllOrigins 设置为 true。

【讨论】：

请以文本形式而不是图像形式提供代码。你可以change你的答案（“下一次”是完全不能接受的）。参见例如Should we edit a question to transcribe code from an image to text? 提前致谢。【参考方案21】：

我犯过很多次这个错误，正因为如此，我给大家做了一个“检查清单”。

在您的项目中启用CORS：如果您正在使用Node.js（例如），您可以使用：

npm install cors;
import cors from 'cors';
app.use(cors());

您可以像这样手动设置标题（如果需要）：

app.use((req, res, next) => 
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authortization');
    res.setHeader('Acces-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');

记得在前端项目的 API 链接中添加 http://，如果请求 URL 不是，则某些浏览器（如 Chrome）不接受使用 CORS 的请求t HTTP 或 HTTPS：

http://localhost:3000/api

检查您的项目是否正在使用 proxy.config.js 文件。请参阅Fixing CORS errors with Angular CLI proxy。

【讨论】：

不是missing 吗？【参考方案22】：

在 2021 年 12 月的 Chrome 97 中，不允许使用 Authorization: Bearer ...，除非它在 Access-Control-Allow-Headers 预检响应中（忽略 *）。它产生了这个警告：

[Deprecation] authorization will not be covered by the wildcard symbol (*)

见：Chrome Enterprise release notes, Chrome 97

它似乎也对Access-Control-Allow-Origin 上的* 强制执行相同的限制。如果您想在 * 被阻止后恢复类似行为，您可能必须读取请求者的来源并将其作为预检响应中允许的来源返回。

在某些情况下，当存在其他一些无效凭据（例如：过期的 JWT）时，库可能会丢弃 Access-Control-Allow-Origin 响应标头。然后，浏览器显示“没有 'Access-Control-Allow-Origin' 标头存在”错误，而不是实际错误（在此示例中可能是过期的 JWT）。确保您的库不会丢弃标题并混淆客户端。

【讨论】：

以上是关于尝试从 REST API 获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”标头的主要内容，如果未能解决你的问题，请参考以下文章

尝试从 REST API 获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”标头

REST api：在一次获取中请求多个资源[重复]

如何在 C# 中使用 rest api 从 github 为用户（人）获取数据？