[英]Authentication Error when using mode: no-cors using fetch in React
I am building a React app that is pulling different stats from services for our internal developers (commits, tracked hours, etc).. 我正在构建一个React应用,该应用将从内部开发人员的服务中提取不同的统计数据(提交,跟踪的时间等)。
I am using fetch to grab API data from Harvest, a time tracking app. 我正在使用抓取功能从时间跟踪应用Harvest抓取API数据。 According to their docs , you can use basic HTTP authentication.
根据他们的文档 ,您可以使用基本的HTTP身份验证。 When I use the app Postman, all is well and I can see the response just fine.
当我使用Postman应用程序时,一切都很好,我可以看到响应很好。 Initially I used:
最初,我使用:
getHarvest(){
// Set Harvest Headers
const harvestHeaders = {
method: 'GET',
headers: {
'Authorization': 'Basic xxxxxxxxxxxxxxx=',
'Content-Type': 'application/json',
'Accept': 'application/json',
'Cache-Control': 'no-cache',
}
};
fetch('https://factor1.harvestapp.com/projects/', harvestHeaders)
.then( response => response.json() )
.then( projects => {
// Do some stuff
} )
}
This gives me an error in the console: 这在控制台中给我一个错误:
Fetch API cannot load https://myaccount.harvestapp.com/projects/ .
提取API无法加载https://myaccount.harvestapp.com/projects/ 。 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
对预检请求的响应未通过访问控制检查:请求的资源上不存在“ Access-Control-Allow-Origin”标头。 Origin ' http://localhost:3000 ' is therefore not allowed access.
因此,不允许访问源' http:// localhost:3000 '。 The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
响应的HTTP状态代码为404。如果不透明的响应满足您的需求,请将请求的模式设置为“ no-cors”,以在禁用CORS的情况下获取资源。
So with that feedback I changed the function to look like this: 因此,利用该反馈,我将该功能更改为如下所示:
getHarvest(){
// Set Harvest Headers
const harvestHeaders = {
method: 'GET',
mode: 'no-cors',
headers: {
'Authorization': 'Basic xxxxxxxxxxxxxxx=',
'Content-Type': 'application/json',
'Accept': 'application/json',
'Cache-Control': 'no-cache',
}
};
fetch('https://factor1.harvestapp.com/projects/', harvestHeaders)
.then( response => response.json() )
.then( projects => {
// do stuff
} )
}
But that results in an Authentication error: 但这会导致身份验证错误:
GET https://myaccount.harvestapp.com/projects/ 401 (Unauthorized)
I'm not sure how I can get the response correctly. 我不确定如何才能正确获得响应。 Am I doing something wrong?
难道我做错了什么? It seems odd to me that using the app Postman works but this doesn't.
对我来说,使用邮递员应用程序有效似乎很奇怪,但事实并非如此。 Thoughts?
有什么想法吗? Thanks!
谢谢!
It doesn't seem like the Harvest API is meant to be used with XHR or Fetch from Web applications. 似乎Harvest API不打算与XHR或从Web应用程序中获取一起使用。
At least their docs don't mention anything about using their API from XHR or Fetch, nor do those docs mention anything about Access-Control-Allow-Origin
nor CORS in general. 至少他们的文档中没有提及有关使用XHR或Fetch中的API的任何内容,也没有提及任何有关
Access-Control-Allow-Origin
或CORS的内容。
Instead the docs give examples of using the API with curl
and with the Postman REST Client. 取而代之的是,文档提供了将示例与
curl
和Postman REST Client结合使用的示例。
And trying examples in the docs like below, the response has no Access-Control-Allow-Origin
. 尝试像下面的文档中的示例,响应没有
Access-Control-Allow-Origin
。
curl -H 'Content-Type: application/xml' -H 'Accept: application/xml' \
-u "user@example.com:password" https://example.harvestapp.com/account/who_am_i
So it seems like the answer is: You can't access the Harvest API with XHR/Fetch from a Web app. 看来答案似乎是:您无法通过Web应用程序使用XHR / Fetch访问Harvest API。
It works in Postman because Postman is not bound by the same-origin policy browsers enforce to prevent Web apps running in a browser from making cross-origin requests unless the site/endpoint the request is made to has opted in to using CORS (which it seems Harvest hasn't opted into). 它可以在Postman中使用,因为Postman不受同源策略的约束,浏览器强制执行该规则以阻止在浏览器中运行的Web应用发出跨源请求,除非请求的站点/端点选择使用CORS(似乎收割者尚未选择加入)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.