Blazor请求被PHP API上的CORS策略阻止

Question

我正在基于客户端Blazor设置一个PHP API和一个网页。但是由于某种原因，触发了CORS，并且我的登录过程或对我的PHP页面的任何请求都导致CORS错误。

我开始使用C＃控制台应用程序和Blazor应用程序测试我的PHP API，我尝试使用没有任何数据库访问权来测试该功能。 Blazor现在与Preview 9一起运行。PHP版本为5.3.8。从理论上讲，我可以对其进行更新，但是正在运行其他几个活动项目，而我没有任何测试环境。 MySQL版本5.5.24。

[首先，我想可能是因为我在本地计算机上运行它，所以我将其推送到同时运行PHP和MySQL的网站。我仍然遇到这个CORS错误。

我仍在测试，因此我尝试将其设置为允许任何来源。在此之前，我还没有使用CORS的经验。可以肯定的是，我应该能够在我访问的每个文件中添加允许CORS的PHP代码，但是由于它们都应该位于同一网站上，所以我认为CORS甚至不相关吗？

PHP代码：

function cors（）{

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
    // you want to allow, and if so:
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        // may also be using PUT, PATCH, HEAD etc
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
}

echo "You have CORS!";

}cors（）;

使用注入的HttpClient的C＃代码：var resp =等待Http.GetStringAsync（link）;

我得到的错误是：CORS策略已阻止从来源“ https://titsam.dk/ntbusit/busitapi/requestLoginToken.php”获取“ https://www.titsam.dk”处的访问：对预检请求的响应未通过访问控制检查：邮件头上不存在“ Access-Control-Allow-Origin”标头要求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

我希望得到的响应是，我使用的链接像登录API一样返回了登录令牌。

是因为它可能正在运行客户端，并且这会触发CORS？但这似乎不能解释为什么我不能让它全部允许。

Answer 1

在Blazor客户端，您需要告诉Fetch API发送凭据（cookie和授权标头）。

它在Blazor doc Cross-origin resource sharing (CORS)

中进行了描述

        requestMessage.Properties[WebAssemblyHttpMessageHandler.FetchArgs] = new
        { 
            credentials = FetchCredentialsOption.Include
        };

ex：

@using System.Net.Http
@using System.Net.Http.Headers
@inject HttpClient Http

@code {
    private async Task PostRequest()
    {
        Http.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", "{OAUTH TOKEN}");

        var requestMessage = new HttpRequestMessage()
        {
            Method = new HttpMethod("POST"),
            RequestUri = new Uri("https://localhost:10000/api/TodoItems"),
            Content = 
                new StringContent(
                    @"{""name"":""A New Todo Item"",""isComplete"":false}")
        };

        requestMessage.Content.Headers.ContentType = 
            new System.Net.Http.Headers.MediaTypeHeaderValue(
                "application/json");

        requestMessage.Content.Headers.TryAddWithoutValidation(
            "x-custom-header", "value");

        requestMessage.Properties[WebAssemblyHttpMessageHandler.FetchArgs] = new
        { 
            credentials = FetchCredentialsOption.Include
        };

        var response = await Http.SendAsync(requestMessage);
        var responseStatusCode = response.StatusCode;
        var responseBody = await response.Content.ReadAsStringAsync();
    }
}

您可以使用WebAssemblyHttpMessageHandlerOptions.DefaultCredentials静态属性全局设置此选项