Fetch API无法加载https：//login.live.com/oauth20_authorize.srf？client_id = ...

我遇到了与我的Reactjs应用程序有关的问题，该应用程序通过Microsoft身份验证将Web API 2部署到Azure，其中我的初始GET请求抛出一个错误，指出：Fetch API无法加载https：//login.live.com/oauth20_authorize.srf？client_id = ...

Fetch API cannot load https://login.live.com/oauth20_authorize.srf? 
client_id=[...]&redirect_uri=[MY_REDIRECT_URL]. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin '[MY_AZURE_SITE]' is therefore not allowed access. If an opaque response serves 
your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我真正的新Azure和使用反应，以便我不确定我哪里错在这里。关于这个问题的奇怪的部分是，如果我为我的应用程序打开Microsoft身份验证，它将按预期工作。

我一直在这个问题上停留了一段时间，而且我不确定我的错在哪里。我也不确定哪些信息有助于解决此问题，因此请随时发表评论，询问代码/信息，我将更新我的问题。

来源

2017-09-15 scapegoat17

您正在尝试从不同的网址获取内容，然后您的网站最初是主持人。出于安全原因，API为请求设置了一些规则。为了能够提出请求，您需要设置CORS。您需要为您的请求设置适当的标题。

你可以阅读更多关于CORS here

资源使一个跨域HTTP请求时，它从不同的域，协议或端口自身的请求资源。例如，对于示例，从http://domain-a.com提供的HTML页面对http://domain-b.com/image.jpg发出 src请求。今天在网页上的许多页面加载资源，如来自独立域的CSS样式表，图像和脚本。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch 遵循相同的来源策略。因此，使用 XMLHttpRequest或Fetch的Web应用程序只能向其自己的域发出HTTP请求。为了改进Web应用程序，开发人员要求浏览器供应商允许跨域请求。

来源

2017-09-15 16:07:45 bennygenel

我不明白的部分是，我的React网页与我的web api托管在同一个地方，并且没有Microsoft身份验证就可以很好地工作。一旦启用微软身份验证，它会打破我的请求。我可能是错的，但我不认为我必须让CORS能够让我的认证工作。 – scapegoat17

它可能在相同的地方托管，但您提出请求的网址与您的网址具有不同的来源。您正在从“https：// www.yourweburl.com”向“https：// login.live.com”发出请求。检查CORS必需的标题并将它们作为参数添加到您的获取请求中。 – bennygenel

不过，我不太确定这些标题可能是什么。有任何想法吗？ – scapegoat17

Fetch API无法加载https：//login.live.com/oauth20_authorize.srf？client_id = ...

回答

相关问题