You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3.9 KiB

Raw Permalink Blame History

Web Deployment - Important Notes

⚠️ CORS Configuration Required for Web

Current Status

✅ Mobile App: Works perfectly
⚠️ Web App: Requires server CORS configuration

The Issue

The web browser blocks connections to https://ms.hmg.com/nscapi due to CORS (Cross-Origin Resource Sharing) policy.

Error you'll see:

ClientException: Failed to fetch, uri=https://ms.hmg.com/nscapi/PatientCallingHub/negotiate

What This Means

The web app cannot connect to SignalR hub without CORS headers
The API works fine (mobile proves this)
This is a server configuration issue, not a code issue

🔧 Quick Fix Guide

For Backend/Server Team:

The SignalR hub needs to allow cross-origin requests from the web app.

Add this to your ASP.NET Core SignalR server:

// In Startup.cs or Program.cs
services.AddCors(options =>
{
    options.AddPolicy("AllowQLineWeb", builder =>
    {
        builder.WithOrigins(
            "http://localhost:8080",        // Flutter dev
            "http://10.71.50.53:8080",      // Device IP
            "https://your-domain.com"       // Production domain
        )
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials();  // Required for SignalR
    });
});

// Enable CORS
app.UseCors("AllowQLineWeb");

📖 Detailed Solutions

See CORS_ISSUE_SOLUTION.md for:

Complete server configuration examples
Alternative solutions (reverse proxy, same-origin deployment)
Testing methods
Troubleshooting guide

🚀 Deployment Options

Option 1: Fix CORS (Recommended)

Configure the backend server to allow web requests. See CORS_ISSUE_SOLUTION.md.

Option 2: Same-Origin Deployment

Deploy web app on the same domain as the API:

API: https://ms.hmg.com/nscapi
Web: https://ms.hmg.com/qline ← No CORS issues!

Option 3: Use Reverse Proxy

Set up a reverse proxy (nginx, Apache) to route both API and web through same origin.

🧪 Testing

Before deploying web app, test CORS:

1. Open browser console on your web app

2. Run this test:

fetch('https://ms.hmg.com/nscapi/PatientCallingHub/negotiate?IPAddress=10.71.50.53')
    .then(r => console.log('✅ CORS working!', r))
    .catch(e => console.error('❌ CORS blocked:', e));

3. If you see "CORS blocked":

Server needs CORS configuration
Contact backend team with CORS_ISSUE_SOLUTION.md

4. If you see "CORS working":

You're ready to deploy! 🎉

📝 Checklist Before Web Deployment

Backend server has CORS configured for your web domain
CORS allows credentials (Access-Control-Allow-Credentials: true)
CORS allows required headers
SignalR hub endpoint has CORS applied
Test CORS from browser console (see above)
Verify SignalR connection works in browser dev tools

🐛 Troubleshooting

"Failed to fetch" error

Cause: CORS not configured
Fix: Configure CORS on server (see CORS_ISSUE_SOLUTION.md)

"Hub Status: Disconnected" in footer

Cause: Cannot connect to SignalR hub
Fix: Check browser console for errors, likely CORS

Mobile works but web doesn't

Cause: CORS only affects browsers
Fix: This confirms it's CORS - configure server

📞 Support

For Server/Backend Team:

See: CORS_ISSUE_SOLUTION.md
Section: "Solution 1: Configure CORS on Server"

For Frontend/Web Deployment:

Verify CORS is configured before deploying
Test using the browser console method above

✅ What's Already Working

✅ IP detection and persistence (localStorage)
✅ IP configuration dialog
✅ IP retrieval on page reload
✅ SignalR connection logic (works on mobile)
✅ All UI components
✅ Offline detection and reconnection logic

Only missing: Server CORS configuration for web browsers

Last Updated: August 2, 2026

3.9 KiB Raw Permalink Blame History