获取失败 - Cors 错误 - 获取授权时 Header - 邮递员工作正常

Question

大家好，我正在尝试解决一些问题。

我需要使用我的凭据获取一些数据。

如果我在 POSTMAN 上使用 Auth Basic Authorization，我得到数据，但是当我在我的代码上尝试它时，它在浏览器上运行，我在控制台上得到“TypeError：无法获取”，在网络上我得到这个状态“CORS 错误” .

这是代码：

fetch(
      'https://content-us-8.content-cms.com/api/f8d92c5b-2ec6-46ee-8e22-cd2d9a556473/authoring/v1/content/views/by-type?id=5030aaad-9bf6-45db-9a3e-5cc7cd190103',
      {
        headers: {
          Authorization: 'Basic ' + base64.encode(userName + ':' + password)
        },
        withCredentials: true
      }
    )
      .then((el) => el.json())
      .then((el) => console.log(el))
      .catch((err) => console.log(err))
      .finally((el) => {
        console.log('FINALLY');
        console.log(el);
      });

如果我在没有 headers 的情况下调用 ，我会收到此错误：

{ "requestId": "807bd27d2b28962b9d2834458e926499", "service": "prod-infra-api-dispatcher", "version": "0.0.1883", "description": "Acoustic Content, API Dispatcher Component", "errors": [ { "name": "AccessControlError", "message": "The user 'undefined' tried to perform GET /content/views/by-type with tenant 'f8d92c5b-2ec6-46ee-8e22-cd2d9a556473'. Access to the service was denied because the user roles 'anonymous' do not match the accepted roles 'admin,manager,editor,viewer'. Verify that the user has the correct role assigned.", "locale": "en", "parameters": { "statusCode": 403, "method": "GET", "path": "/content/views/by-type", "roles": [ "anonymous" ], "requiredRoles": [ "admin", "manager", "editor", "viewer" ], "timestamp": 1650811022658 }, "timestamp": "Sun, 24 Apr 2022 14:37:02 GMT" } ], "timestamp": "Sun, 24 Apr 2022 14:37:02 GMT", "message": "The user 'undefined' tried to perform GET /content/views/by-type with tenant 'f8d92c5b-2ec6-46ee-8e22-cd2d9a556473'. Access to the service was denied because the user roles 'anonymous' do not match the accepted roles 'admin,manager,editor,viewer'. Verify that the user has the correct role assigned." }

我知道发生此错误是因为我没有设置凭据...但是我尝试了多种方法来实现此目的但没有成功。

Answer 1

仅当前面的预检请求成功时，浏览器才会使用 Authorization header 发出 cross-origin GET 请求。但是你可以试试 curl:

>curl -I -X OPTIONS -H "Access-Control-Request-Headers:Authorization"
 -H "Origin:http://localhost"
 https://content-us-8.content-cms.com/api/...

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,OPTIONS
Access-Control-Allow-Headers: accept,accept-language,content-language,pragma,cache-control,x-xsrf-token,x-acoustic-region,x-acoustic-auth-source,x-ibm-dx-tenant-id,x-cms-user-auth,x-ibm-dx-user-auth
Access-Control-Expose-Headers: cache-control,content-language,content-type,expires,last-modified,pragma,x-ibm-dx-request-id,x-response-time

Authorization header 不在允许的 header 列表中。换句话说：该服务不允许 cross-origin 请求中的基本身份验证。

如果您不能影响 content-cms.com 上的后端，使 Authorization 成为允许的 header，唯一的选择是通过您自己的后端服务器传送请求。或者你在编程“server-less”？

获取失败 - Cors 错误 - 获取授权时 Header - 邮递员工作正常

Failed to Fetch - Cors Error - When Fetching with Authorization Header - On Postman working OK

reactjs

cors

fetch