blazor c#怎样进行跨域通信 - 问答

在Blazor WebAssembly 应用中实现跨域通信，你可以使用以下方法之一：

使用代理服务器

创建一个ASP.NET Core Web API项目作为代理服务器，该服务器将处理来自Blazor应用的请求并将其转发到目标服务器。在Blazor应用中，你可以使用HttpClient与代理服务器通信。

步骤如下：

a. 创建一个ASP.NET Core Web API项目，用于作为代理服务器。

b. 在代理服务器中，添加一个端点来处理来自Blazor应用的请求。例如：

[ApiController]
[Route("api/[controller]")]
public class ProxyController : ControllerBase
{
    [HttpGet("{url}")]
    public async Task<IActionResult> Get([FromQuery] string url)
    {
        using var client = new HttpClient();
        var response = await client.GetAsync(url);
        return CreatedAtAction(nameof(Get), new { id = url }, response.Content);
    }
}

c. 在Blazor应用中，使用HttpClient与代理服务器通信：

@inject HttpClient Http

<button @onclick="OnButtonClick">Call Proxy</button>

@code {
    private async Task OnButtonClick()
    {
        var url = "https://targetserver.com/api/data";
        var response = await Http.GetAsync($"api/proxy/{url}");
        var data = await response.Content.ReadAsStringAsync();
        Console.WriteLine(data);
    }
}

使用CORS（跨域资源共享）

如果你有权限访问目标服务器，可以在目标服务器上配置CORS策略，允许来自Blazor应用的请求。这需要在目标服务器的API中添加CORS支持。

在ASP.NET Core中，你可以使用Microsoft.AspNetCore.Cors包来配置CORS策略。首先，安装该包：

dotnet add package Microsoft.AspNetCore.Cors

然后，在目标服务器的API中配置CORS策略：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowBlazor", builder =>
        {
            builder.WithOrigins("https://your-blazor-app-domain.com")
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    app.UseCors("AllowBlazor");

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

现在，Blazor应用可以使用HttpClient与目标服务器通信，而无需担心跨域问题。

注意：这些方法仅适用于Blazor WebAssembly 应用。如果你使用的是Blazor Server，你可以直接使用HttpClient与目标服务器通信，因为服务器端不受浏览器的同源策略限制。

0 赞

0 踩