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

Question

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

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

** CORS策略已阻止从原点“ null”访问“ https://login.windows.net/XXXXXX/oauth2/authorize?response_type=id_token&redirect_uri=XXXXX”（从“ https://AAAwebapp.azurewebsites.net/XXXXX”重定向）的访问：没有“ 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。