# Local file webview and CORS **URL:** \ **Category:** Q&A\ **Created:** [February 12, 2026, 12:13pm UTC](https://community.amazondeveloper.com/t/local-file-webview-and-cors/27652 "2026-02-12T12:13:06Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![zemlanin](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/zemlanin/32/5142_2.png) [@zemlanin](https://community.amazondeveloper.com/u/zemlanin)\ **Post date:** [February 12, 2026, 12:13pm UTC](https://community.amazondeveloper.com/t/local-file-webview-and-cors/27652/1 "2026-02-12T12:13:06Z")
Hello. I’m loading a local HTML file using `file://` source in a webview. The file loads fine, but scripts in the file fail to request external URLs (API responses and fonts) with ```auto Access to XMLHttpRequest at 'https://[redacted]' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` I can’t find any `WebView` prop to ignore CORS rendering `file://` pages: - `allowFileAccess={true}` nor `mixedContentMode='always'` change anything - `onShouldStartLoadWithRequest` doesn’t seem like a relevant prop Am I missing something? What’s an expected handling of CORS/HTTP requests from a `file://` in a webview? WebView code: ```javascript { console.log('onLoadStart url: ', event.nativeEvent.url); }} onLoad={(event) => { console.log('onLoad url: ', event.nativeEvent.url); }} onError={(event) => { console.log('onError url: ', event.nativeEvent.url); }} /> ``` **App Name** : Not yet submitted **App Link on Amazon Appstore** (found through Developer Console \> Actions column in App List \> View on [Amazon.com](http://Amazon.com)): Not yet submitted ---
**Author:** ![amen](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@amen](https://community.amazondeveloper.com/u/amen)\ **Post date:** [February 12, 2026, 7:22pm UTC](https://community.amazondeveloper.com/t/local-file-webview-and-cors/27652/3 "2026-02-12T19:22:31Z")
Hi @zemlanin, Welcome to Amazon Developer Community!! Thank you for your question about CORS and local file loading in WebView. This is a known limitation with file:// protocol in WebView - the browser treats the origin as null, which causes CORS blocking. Could you try out these workarounds and let us know if they work? 1. **Message Bridge approach** - Make HTTP requests from your React Native layer and pass data to the WebView using the message bridge pattern 2. **Local HTTP server** - Serve your HTML through [http://localhost](http://localhost/) instead of file:// 3. **Bundle resources locally** - For fonts and static assets, include them in /pkg/assets/ with relative paths Our team is looking into this limitation and will provide an update as soon as we have more information. **Getting Started:** - [Message Bridge Documentation](https://community.amazondeveloper.com/t/getting-started-with-vega-web-apps-a-developer-s-playbook/20262#the-message-bridge-8) - [WebView Component Reference](https://developer.amazon.com/docs/vega-api/latest/webview-component-reference.html) Thanks for helping us improve the Vega platform. Warm regards, Aishwarya ---
**Author:** ![zemlanin](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/zemlanin/32/5142_2.png) [@zemlanin](https://community.amazondeveloper.com/u/zemlanin)\ **Post date:** [February 13, 2026, 10:57am UTC](https://community.amazondeveloper.com/t/local-file-webview-and-cors/27652/4 "2026-02-13T10:57:35Z")
Thank you for a quick response! > [@amen](#): > > - **Message Bridge approach** - Make HTTP requests from your React Native layer and pass data to the WebView using the message bridge pattern We probably could make that work, although it won’t be trivial. Pages in the WebView are already used on other platforms and make requests predominantly through `@tanstack/query` and I can see only two approaches of using a bridge: - RN makes requests on its own (based on WebView’s URL) and pushes the data into `query`’s cache - A lot of duplication and tight coupling between RN and WebView’s contents - Replace WebView’s API calls (XHR via axios and HLS.js) with `postMessage`+`onMessage` (+`injectJavaScript`?) - Maintaining the same Promise-based API when multiple in-flight requests would be a challenge - Won’t help with the fonts, but that’s minor as we indeed could keep using bundled fonts (instead of overwriting them with the latest remote version) > [@amen](#): > > - **Local HTTP server** - Serve your HTML through [http://localhost](http://localhost/) instead of file:// That would require (production) API endpoints to accept `localhost` requests, which I’m hesitant about. Although that localhost server could probably also be a proxy for API requests?.. All and all, the approach seems the most promising but wasteful (but maybe it’s common in RN ecosystem? Vega is the first time I’m dabbling in RN) > [@amen](#): > > - **Bundle resources locally** - For fonts and static assets, include them in /pkg/assets/ with relative paths Won’t work for API requests… ---
**Author:** ![zemlanin](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/zemlanin/32/5142_2.png) [@zemlanin](https://community.amazondeveloper.com/u/zemlanin)\ **Post date:** [February 16, 2026, 2:47pm UTC](https://community.amazondeveloper.com/t/local-file-webview-and-cors/27652/5 "2026-02-16T14:47:29Z")
For now, going to load a remote URL as the initial WebView’s source If it fails to load, I’ll be changing the source to a bundled (`file://`) error page URL that doesn’t do any API requests ---
**Author:** ![system](https://dhm3gbtzu79o6.cloudfront.net/user_avatar/community.amazondeveloper.com/system/32/5065_2.png) [@system](https://community.amazondeveloper.com/u/system)\ **Post date:** [June 1, 2026, 8:15pm UTC](https://community.amazondeveloper.com/t/local-file-webview-and-cors/27652/7 "2026-06-01T20:15:59Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.