SignalR CORS 同源政策？

Question

当我运行我的角度应用程序时，我得到了一个 CORS，尽管我已经在我的 .NET Core 应用程序中启用了它，但常规的 http 请求似乎工作正常，只是 SignalR 遇到了问题。任何建议将不胜感激。提前致谢。

\n\n

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5001/api/chat/negotiate. (Reason: expected \xe2\x80\x98true\xe2\x80\x99 in CORS header \xe2\x80\x98Access-Control-Allow-Credentials\xe2\x80\x99).\n\nCross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5001/api/chat/negotiate. (Reason: CORS request did not succeed).\n\n[2019-07-06T19:34:25.061Z] Warning: Error from HTTP request. 0: . Utils.js:206\n[2019-07-06T19:34:25.065Z] Error: Failed to complete negotiation with the server: Error Utils.js:203\n[2019-07-06T19:34:25.070Z] Error: Failed to start the connection: Error Utils.js:203\nError while establishing connection :( chatComponent.component.ts:43:28\n

\n\n

这是我的 Startup.cs 文件

\n\n

using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Hosting;\nusing Microsoft.AspNetCore.HttpsPolicy;\nusing Microsoft.AspNetCore.Mvc;\nusing Microsoft.Extensions.Configuration;\nusing Microsoft.Extensions.DependencyInjection;\nusing Microsoft.Extensions.Logging;\nusing Microsoft.Extensions.Options;\n\n// using WebApiServerApp.Searching;\n\nnamespace WebApiServerApp\n{\n    public class Startup\n    {\n        public Startup(IConfiguration configuration)\n        {\n            Configuration = configuration;\n\n        }\n\n        public IConfiguration Configuration { get; }\n\n        // This method gets called by the runtime. Use this method to add services to the container.\n        public void ConfigureServices(IServiceCollection services)\n        {\n            services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>\n            {\n                builder\n                .AllowAnyMethod()\n                .AllowAnyHeader()\n                .WithOrigins("http://localhost:4200");\n            }));1\n\n            services.AddSignalR();\n            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);\n        }\n\n        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\n        public void Configure(IApplicationBuilder app, IHostingEnvironment env)\n        {\n            if (env.IsDevelopment())\n            {\n                app.UseDeveloperExceptionPage();\n            }\n            else\n            {\n                app.UseHsts();\n            }\n\n\n\n\n            app.UseCors("CorsPolicy");\n            app.UseHttpsRedirection();\n            app.UseMvc();\n\n             app.UseSignalR(routes =>\n            {\n                routes.MapHub<ChatHub>("/api/chat");\n            });\n        }\n    }\n}\n

\n\n

这是我的 ChatHub 课程

\n\n

using System;\nusing System.Threading.Tasks;\nusing System.Collections.Generic;\n\nusing Microsoft.AspNetCore.SignalR;\n\nnamespace WebApiServerApp\n{\n    public class ChatHub : Hub\n    {\n        public Task SendToAll(string name, string message)\n        {\n             return Clients.All.SendAsync("ReceiveMessage", name, message);\n        }\n    } \n}\n

\n\n

这是我的角度客户端

\n\n

\nimport { Component, OnInit } from \'@angular/core\';\nimport { ITag } from \'../Tag/tag\';\nimport { TagComponent } from \'../Tag/tag.component\';\nimport { Router, ActivatedRoute, ParamMap, Params } from \'@angular/router\';\nimport { switchMap } from \'rxjs/operators\';\nimport { Observable } from \'rxjs\';\nimport { IMessage } from \'./Message\';\nimport { HubConnection, HubConnectionBuilder } from \'@aspnet/signalr\';\n\n\n\n@Component({\n  selector:\'chat\',\n  templateUrl:"./chatComponent.component.html",\n  //styleUrls: [\'./tagSearch.component.css\']\n  // providers: [ ChatService ]\n})\n\nexport class ChatComponent implements OnInit {\n\n  hubConnection: HubConnection;\n\n  message: string;\n  nick: string;\n  messages: string[] = [];\n\n  constructor(\n    private route: ActivatedRoute,\n    private router: Router\n  ) {}\n\n  ngOnInit() {\n\n    this.nick = window.prompt(\'Your name:\', \'John\');\n\n    //http://localhost:5001/api/chat\n    this.hubConnection = new HubConnectionBuilder().withUrl("http://localhost:5000/api/chat", {\n      skipNegotiation: true,\n      transport: HttpTransportType.WebSockets\n    }).build();\n\n    this.hubConnection\n      .start()\n      .then(() => console.log(\'Connection started!\'))\n      .catch(err => console.log(\'Error while establishing connection :(\'));\n\n      this.hubConnection.on(\'ReceiveMessage\', (nick: string, receivedMessage: string) => {\n        const text = `${nick}: ${receivedMessage}`;\n        this.messages.push(text);\n        });\n\n    }\n\n\n    public sendMessage(): void {\n        this.hubConnection\n          .invoke(\'SendToAll\', this.nick, this.message)\n          .catch(err => console.error(err));\n    }\n\n}\n

\n\n

更新，新错误：

\n\n

Firefox can\xe2\x80\x99t establish a connection to the server at ws://localhost:5000/api/chat. WebSocketTransport.js:85\n[2019-07-06T20:06:31.730Z] Error: Failed to start the connection: null Utils.js:203\nError while establishing connection :(\n

\n\n

在铬中它说

\n\n

WebSocketTransport.js:85 WebSocket connection to \'ws://localhost:5000/api/chat\' failed: Error during WebSocket handshake: Unexpected response code: 307\n(anonymous) @ WebSocketTransport.js:85\nUtils.js:203 [2019-07-06T20:31:51.740Z] Error: Failed to start the connection: null\npush../node_modules/@aspnet/signalr/dist/esm/Utils.js.ConsoleLogger.log @ Utils.js:203\nchatComponent.component.ts:46 Error while establishing connection :(\n

\n

Answer 1

尝试app.UseHttpsRedirection();从Startup.cs中删除。

代码 307 是重定向响应。所以，这可能就是问题的根源。

或者，或者了解一下如何使用 HTTPS。