I am currently working on a project where I am using Vue with TypeScript and @microsoft/signalr. My goal is to create a chat feature using SignalR, and on the backend, I am utilizing C# with ASP.NET Core and docker.
Here is the code snippet I have implemented on the backend:
// Backend code snippet goes here
ChatHub class:
// ChatHub class code snippet goes here
Now, moving on to the frontend:
// Frontend code snippet goes here
In my ChatView.vue file, I am using the ChatService:
//...
export default defineComponent({
components: { Header},
data() {
return {
store: store,
chatService: {} as ChatService,
//...
};
},
computed: {
},
mounted() {
//...
this.load_data();
},
methods: {
load_data(){
let chatService = container.resolve(ChatService);
this.chatService = chatService;
chatService.start(this.user.id, this.store.state.user!);
this.messages = this.chatService.messages;
},
//...
},
})
</script>
However, after calling load_data() and connection.start(), I encounter the following error message:
Access to fetch at 'http://localhost:8181/chat/negotiate?negotiateVersion=1' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
@microsoft_signalr.js?v=12bba02c:2110 Uncaught (in promise) Error: Failed to complete negotiation with the server: TypeError: Failed to fetch at HttpConnection._getNegotiationResponse (@microsoft_signalr.js?v=12bba02c:2110:29)
ChatService.ts:35 [2024-06-03T18:17:15.726Z] Error: Failed to start the connection: Error: Failed to complete negotiation with the server: TypeError: Failed to fetch
ChatService.ts:35 [2024-06-03T18:17:15.725Z] Error: Failed
to complete negotiation with the server: TypeError: Failed to fetch
I have tried various CORS policy settings on the backend and different headers in connectionBuilder.WithUrl(...), but I am still facing this issue.