【愚公系列】2023年07月 .NET CORE工具案例-GraphQL.Server（Cors跨域配置）

愚公搬代码

发布于 2025-05-28 08:25:17

7100

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

前言

CORS（Cross-Origin Resource Sharing）是一种机制，允许在浏览器中运行的Web应用程序访问不同源的资源。不同源是指URI（通常是协议，域名和端口）与执行当前代码的文档不同。CORS为Web开发人员提供了一种安全的方式来在Web浏览器中使用跨域资源，同时保护用户的隐私和数据安全。它通过在HTTP头中添加特定的响应头来实现，允许服务器指定哪些域名或IP地址可以访问其资源。

一、Cors跨域配置

1.安装包

在.NET Core中设置CORS以允许跨域访问GraphQL服务器，您可以遵循以下步骤：

在.NET Core Web应用程序中安装Microsoft.AspNetCore.Cors软件包。

Install-Package Microsoft.AspNetCore.Cors

在Startup.cs文件中，将CORS服务添加到应用程序的服务集合中。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Cors;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader());
        });
        
        // 在此添加其他服务
    }

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

        app.UseRouting();

        app.UseCors("CorsPolicy"); // 添加CORS中间件

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

在上面的代码中，我们在ConfigureServices方法中添加了一个CORS策略，并将其命名为CorsPolicy。在Configure方法中，我们将CORS中间件添加到应用程序的请求管道中。

值得注意的是，AllowAnyOrigin()会允许任何来源的跨域请求，这是不安全的，更好的做法是指定允许访问的域，例如：

options.AddPolicy("CorsPolicy",
    builder => builder.WithOrigins("http://example.com")
    .AllowAnyMethod()
    .AllowAnyHeader());

在GraphQL控制器上启用CORS。

假设您的GraphQL控制器名称为GraphQLController，则需要在该控制器类上应用[EnableCors]特性，以启用CORS。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Cors;

[EnableCors("CorsPolicy")]
[Route("[controller]")]
[ApiController]
public class GraphQLController : ControllerBase
{
    // 在此添加GraphQL相关的操作
}

在上面的代码中，我们将EnableCors特性应用到GraphQLController控制器类上，并指定名称为CorsPolicy的CORS策略。

2.使用

在GraphQL.Server中的使用代码如下：

using GraphQL;
using Chat = GraphQL.Samples.Schemas.Chat;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSingleton<Chat.IChat, Chat.Chat>();
builder.Services.AddGraphQL(b => b
    .AddAutoSchema<Chat.Query>(s => s
        .WithMutation<Chat.Mutation>()
        .WithSubscription<Chat.Subscription>())
    .AddSystemTextJson());
builder.Services.AddRouting();
builder.Services.AddCors(options =>
{
    options.AddPolicy("MyCorsPolicy", b =>
    {
        b.AllowCredentials();
        b.WithOrigins("https://localhost:5001");
    });
});

var app = builder.Build();
app.UseDeveloperExceptionPage();
app.UseWebSockets();
app.UseRouting();
app.UseCors();
app.UseEndpoints(endpoints =>
{
    // configure the graphql endpoint at "/graphql"
    endpoints.MapGraphQL("/graphql")
        .RequireCors("MyCorsPolicy");
    // configure Playground at "/"
    endpoints.MapGraphQLPlayground("/");
});
await app.RunAsync();