Nginx 托管 Signalr Blazor Wasm 应用程序：405 方法不允许答案

【问题标题】：Nginx hosting Signalr Blazor Wasm App: 405 Method not AllowedNginx 托管 Signalr Blazor Wasm 应用程序：405 方法不允许
【发布时间】：2020-06-05 02:04:33
【问题描述】：

来自 Nginx 服务的 Blazor WebAssembly 应用程序的此请求返回 405 Method Not Allowed 错误 (POST)：

http://localhost:4000/chatHub/negotiate?negotiateVersion=1

研究我发现当 Nginx 作为反向代理工作时，需要升级标头，但我的情况不是这样。这里的 Nginx 用作 Web 服务器。这是我的 nginx.conf：

events {}

http {
    include mime.types;
    types {
        application/wasm wasm;
    }

    server {
        listen 80;

        location / {
            root /usr/share/nginx/html;
            try_files $uri $uri/ /index.html =404;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, X-Requested-With';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
    }
}

这是我的后端 api 启动配置：

// This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddSignalR();

        services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .SetIsOriginAllowed(host => true);
            });
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseCors();
        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapHub<ChatHub>("/chatHub");
            endpoints.MapControllers();
        });
    }

我在这里缺少什么？我是否必须在 nginx.conf 中映射特定位置“/chatHub”才能以某种方式使用 webSockets？

Ps.：我正在使用 Docker 容器（docker-compose）。

【问题讨论】：

标签： docker asp.net-core nginx blazor asp.net-core-signalr

【解决方案1】：

试试这个

...

server {
    listen 80;

        location /chatHub/ {
            proxy_pass http://localhost:4000
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }

        location / {
            root /usr/share/nginx/html;
            try_files $uri $uri/ /index.html =404;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, X-Requested-With';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
    }
}

...

在 docker-compose.yml 上确保你得到了

...
ports:
  - "4000:4000"
...

【讨论】：

【解决方案2】：

所以，问题毕竟不是 Nginx。我正在向错误的端口发送请求。 Blazor 应用不应通过 Nginx，而是直接向后端请求。

我使用 NavigationManager 类来获取后端的 URI，但我没有意识到它默认指向 前端的来源 这给了我错误的 URI。我关注的是tutorial，但我必须进行一些修改，因为我没有使用 Asp.net 托管版本的 Blazor Wasm。

问题在于端点注册的顺序。 必须在控制器之后注册集线器，否则浏览器会抛出 CORS 错误。所以正确的是：

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chatHub");
        });

【讨论】：