Mobile app REST API file upload blocked by CORS preflight in

BPM Mendix
, , , , , , , ,
1

We’re experiencing CORS preflight issues with file uploads from our hybrid mobile app built with Mendix 9.18. The mobile app uses a WebView to interact with our backend REST API endpoint for uploading documents to case records.

The upload works perfectly from desktop browsers, but fails consistently on mobile devices (both iOS and Android). Browser console shows:


Access to fetch at 'https://api.company.com/upload' from origin 'http://localhost:8080'
has been blocked by CORS policy: Response to preflight request doesn't pass access control check

We’ve configured CORS headers in our REST endpoint microflow, but the preflight OPTIONS request seems to be rejected before reaching our handler. The file upload functionality is critical for field workers who need to attach photos and documents to cases on-site. Any insights on handling CORS preflight in hybrid mobile WebView contexts?

2

I’ve seen this exact issue before. The problem is that hybrid mobile apps using WebView have different origin handling than standard browsers. Your CORS configuration likely handles simple requests but not preflight OPTIONS requests properly. Check if your REST endpoint explicitly handles OPTIONS method - Mendix REST services sometimes skip this by default.

3

Here’s a comprehensive solution addressing all three aspects - CORS preflight handling, hybrid mobile WebView quirks, and REST API file upload architecture:

1. CORS Preflight Handling:

Create a custom Java action to handle OPTIONS requests:

// CustomCORSHandler.java
public void handlePreflight(IContext context, IMendixObject request) {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
    response.setHeader("Access-Control-Max-Age", "86400");
}

Add this to your REST service before-microflow to intercept OPTIONS requests.

2. Hybrid Mobile WebView Solution:

The key issue is that WebViews use file:// or http://localhost origins which trigger CORS. Instead of fighting this, implement a two-stage upload:

// Mobile app - convert to base64 first
const base64File = await convertToBase64(fileObject);
mx.data.action({
    params: { fileData: base64File, fileName: file.name },
    callback: function(result) { /* handle success */ }
});

This bypasses CORS entirely by using Mendix’s native data actions instead of direct REST calls.

3. REST API File Upload (for external integrations):

For external systems that must use REST, implement multipart/form-data handling:

// FileUploadHandler microflow
List<IMendixObject> files = Core.retrieveXPathQuery(context,
    "//System.FileDocument[Name=$fileName]");
if (files.isEmpty()) {
    FileDocument doc = new FileDocument(context);
    Core.storeFileDocumentContent(context, doc.getMendixObject(), inputStream);
}

4. Chunked Upload for Large Files:

For files >5MB, implement chunked upload with resume capability:

  • Client sends file in 1MB chunks with chunk index
  • Server stores chunks temporarily with unique upload ID
  • Final request assembles chunks into complete file
  • Handles network interruptions gracefully

5. Configuration Steps:

  • Set Access-Control-Allow-Origin to your mobile app’s domain (use wildcard only for development)
  • Enable Access-Control-Allow-Credentials if using authentication tokens
  • For iOS WebView, ensure SSL certificates are valid (self-signed certs fail)
  • Add timeout handling - mobile networks can be unreliable

Performance Considerations:

The base64 approach adds ~33% size overhead, but eliminates CORS complexity. For production with many large files, consider:

  • Direct S3/Azure Blob upload with pre-signed URLs
  • Background upload queue for offline capability
  • Compression before upload (images especially)

This architecture has worked reliably across iOS 12+, Android 8+, and all modern browsers. The key is avoiding direct REST calls from WebView contexts and using Mendix’s native communication layer instead.

4

For large files, proxy approach adds overhead but it’s manageable. More importantly, you need to handle chunked uploads for files over 5MB anyway. Here’s what works reliably for hybrid mobile file uploads in Mendix.

5

Another thing to watch out for - hybrid mobile WebViews on iOS have stricter security policies than Android. I’ve had cases where localhost origins were completely blocked regardless of CORS headers. Consider using a proper domain even for local development, or implement a proxy microflow that handles the upload server-side rather than direct client-to-API communication.