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

我正在基于客户端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的经验。可以肯定的是，我应该能够在我访问的每个文件中都添加PHP代码，该文件应该允许CORS，但是由于它们都应该位于同一网站上，所以我认为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 = await Http.GetStringAsync(link);

我得到的错误是：

Access to fetch at 'https://titsam.dk/ntbusit/busitapi/requestLoginToken.php' from origin 'https://www.titsam.dk' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

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

更新：
我在InInitializedAsync中的C＃代码：

link = API_RequestLoginTokenEndPoint;

Http.DefaultRequestHeaders.Add("User-Agent", "HttpClientFactory-Sample");
Http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Authorization", "basic:testuser:testpass");

var requestMessage = new HttpRequestMessage(HttpMethod.Get, link);

requestMessage.Properties[WebAssemblyHttpMessageHandler.FetchArgs] = new
{
    credentials = "include"
};

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

output = responseBody + " " + responseStatusCode;

更新2：
终于可以了。我链接的C＃代码是Agua From Mars提出的解决方案，它解决了将SendAsync与HttpRequestMessage一起使用并向其中添加Fetch属性包含凭据的问题。另一种选择是将此行添加到启动中：

WebAssemblyHttpMessageHandler.DefaultCredentials = FetchCredentialsOption.Include;

然后，我可以继续使用GetStringAsync，因为它成为默认值，因此可以继续做。
等待Http.GetStringAsync（API_RequestLoginTokenEndPoint）;

因此，Agua From Mars建议的所有解决方案都是可行的。但是我遇到了一个浏览器问题，即使解决了问题，它仍然以某种方式将CORS问题保留在缓存中，因此似乎没有任何变化。某些代码更改将显示不同的结果，但我想CORS部分仍然有效。借助Chrome，它有助于打开新的窗格或窗口。在我的Opera浏览器中，这还不够，我不得不在站点打开的情况下关闭所有窗格，以确保清除缓存，然后在站点中也可以在站点中打开一个新窗口或窗格。我已经在两种浏览器中尝试使用ctrl-F5和Shift-F5来使它们清除缓存。这并没有改变任何东西。

我希望这可以帮助其他人避免在此类问题上花费2-3天。

参考方案

更新3.1-preview3

在3.1-preview3中，我们不能对每条消息使用fetch选项，这些选项是全局的

WebAssemblyHttpMessageHandlerOptions.DefaultCredentials = FetchCredentialsOption.Include;

WebAssemblyHttpMessageHandler已被删除。使用的HttpMessageHanlder是WebAssembly.Net.Http.HttpClient.WasmHttpMessageHandler中的WebAssembly.Net.Http，但是在您的依赖中不要包含WebAssembly.Net.Http，否则应用程序将无法启动。

如果要使用HttpClientFactory，可以这样实现：

public class CustomDelegationHandler : DelegatingHandler
{
    private readonly IUserStore _userStore;
    private readonly HttpMessageHandler _innerHanler;
    private readonly MethodInfo _method;

   public CustomDelegationHandler(IUserStore userStore, HttpMessageHandler innerHanler)
   {
       _userStore = userStore ?? throw new ArgumentNullException(nameof(userStore));
       _innerHanler = innerHanler ?? throw new ArgumentNullException(nameof(innerHanler));
       var type = innerHanler.GetType();
       _method = type.GetMethod("SendAsync", BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.InvokeMethod) ?? throw new InvalidOperationException("Cannot get SendAsync method");
       WebAssemblyHttpMessageHandlerOptions.DefaultCredentials = FetchCredentialsOption.Include;
   }
   protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
   {
        request.Headers.Authorization = new AuthenticationHeaderValue(_userStore.AuthenticationScheme, _userStore.AccessToken);            
        return _method.Invoke(_innerHanler, new object[] { request, cancellationToken }) as Task<HttpResponseMessage>;
   }
}


public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient(p =>
    {
        var wasmHttpMessageHandlerType =  Assembly.Load("WebAssembly.Net.Http")
                        .GetType("WebAssembly.Net.Http.HttpClient.WasmHttpMessageHandler");
        var constructor = wasmHttpMessageHandlerType.GetConstructor(Array.Empty<Type>());
        return constructor.Invoke(Array.Empty<object>()) as HttpMessageHandler;
    })
    .AddTransient<CustomDelegationHandler>()
    .AddHttpClient("MyApiHttpClientName")
    .AddHttpMessageHandler<CustonDelegationHandler>();
}

3.0-> 3.1-preview2

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

在Blazor文档Cross-origin resource sharing (CORS)中进行了描述

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

例如：

@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静态属性全局设置此选项。

或者，您可以实现DelegatingHandler并使用HttpClientFactory在DI中进行设置：

    public class CustomWebAssemblyHttpMessageHandler : WebAssemblyHttpMessageHandler
    {
        internal new Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
        {
            return base.SendAsync(request, cancellationToken);
        }
    }

    public class CustomDelegationHandler : DelegatingHandler
    {
        private readonly CustomWebAssemblyHttpMessageHandler _innerHandler;

        public CustomDelegationHandler(CustomWebAssemblyHttpMessageHandler innerHandler)
        {
            _innerHandler = innerHandler ?? throw new ArgumentNullException(nameof(innerHandler));
        }
        protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
        {
            request.Properties[WebAssemblyHttpMessageHandler.FetchArgs] = new
            {
                credentials = "include"
            };
            return _innerHandler.SendAsync(request, cancellationToken);
        }
    }

在Setup.ConfigureServices中

services.AddTransient<CustomWebAssemblyHttpMessageHandler>()
    .AddTransient<WebAssemblyHttpMessageHandler>()
    .AddTransient<CustomDelegationHandler>()
    .AddHttpClient(httpClientName)
    .AddHttpMessageHandler<CustomDelegationHandler>();

然后，您可以使用HttpClient为您的API创建IHttpClientFactory.CreateClient(httpClientName)

要使用IHttpClientFactory，您需要安装Microsoft.Extensions.Http软件包。

3.0-preview3 => 3.0-preview9

将WebAssemblyHttpMessageHandler替换为BlazorHttpMessageHandler

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

T-SQL等价的正则表达式'\ b' - c#

我正在将利用regex的CLR函数转换为SQL函数。我知道SQL Server并不完全支持正则表达式，但是我只需要一种情况就可以搜索单词。搜索字段值：{"Id":1234, "Title": "The quick brown"}.NET中的正则表达式模式：'\b' + '…

当回复有时是一个对象有时是一个数组时，如何在使用改造时解析JSON回复？ - java

我正在使用Retrofit来获取JSON答复。这是我实施的一部分-@GET("/api/report/list") Observable<Bills> listBill(@Query("employee_id") String employeeID); 而条例草案类是-public static class…

改造正在返回一个空的响应主体 - java

我正在尝试使用Retrofit和Gson解析一些JSON。但是，我得到的响应机构是空的。当我尝试从对象中打印信息时，出现NullPointerException。我确保URL正确，并且我也确保POJO也正确。我正在使用jsonschema2pojo来帮助创建POJO类。这是我要解析的JSON{ "?xml": { "@versi…

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

推荐标签：, , , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]