天蓝色Web应用程序的请求资源上没有'Access-Control-Allow-Origin'标头

Question

当我尝试从react应用访问azure Web应用（REST API）时，出现此错误。

我修改了Web应用程序的核心，以接受来自“ *”的CORE起源，但出现相同的错误。但是，如果我禁用了Azure Web应用程序的“身份验证/授权”选项，则不会出现这样的错误。仅当我使用Azure AD应用启用了“身份验证/授权”时，才会发生这种情况。

**从原点'null'的'https://login.windows.net/XXXXXX/oauth2/authorize?response_type=id_token&redirect_uri=XXXXX'处取回（从'https://AAAwebapp.azurewebsites.net/XXXXX'重定向）的访问已被CORS策略阻止：请求中不存在'Access-Control-Allow-Origin'标头资源。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。*

Answer 1

请确保您的Web API资源已启用CORS。有关如何启用它的步骤，请参见https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-rest-api#add-cors-functionality。请注意，上述步骤仅允许来自localhost：5000的CORS。在生产环境中，您需要将allowedOrigins URL设置为您要授予访问权限的URL，或使用“ *”启用所有URL。

Answer 2

我能够解决此问题。我使用以下代码修改了我的react应用。

const myHeaders = {}
const myInit = {
method: "GET",
headers: myHeaders,
credentials: "include"
}
和获取部分已通过：]修改。
fetch('myapi url', myInit)
之后启用了Azure Web应用程序的Access-Control-Allow-Credentials。