search

ionic-team / cordova-plugin-wkwebview-engine

Mirror of Apache Cordova wkwebview engine plugin
Apache License 2.0
289 stars 65 forks source link

Html5 video load vtt caption CORS error in WKWebview #167

Open xixiaofinland opened 7 years ago

xixiaofinland commented 7 years ago

Before everything:

  1. if I remove WKWebview plugin, this issue seems gone. Re-install WKWebview, the issue reappears. But UIWebview is soooo slow.**
  2. same code deploying to Android, the issue does not appear there.

I have a html5 page with video tag that loads video from the phone local storage and a vtt file from remote AWS S3. I have added crossorigin attribute in video tag

<video src="a-local-path-mp4-file" crossorigin="anonymous">
<track src="http://s3-path-to-vtt-file">
</video>

If I open the page in iOS (WKWebview plugin installed) for the first 3-4 times, the vtt file was loaded successfully. Then it started to give a CORS error Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

I disabled CDN(cloudfront) in S3 for troubleshooting purpose.

I have configured CORS in AWS S3 to even AllowedOrigin to http:// and https://. Issue persists. Curl command shows CORS is working as expected.

All info collected from above troubleshooting leads to WKWebview plugin, but I couldn't figure out what to do. Any help is appreciated!

Just in case, here is an example CORS setting in AWS S3:

<CORSRule>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
hartherbert commented 7 years ago

@Xixiao007 did you try to add the Options-Method in the <AllowedMethod>?

It would look like this:

<CORSRule>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>OPTIONS</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
xixiaofinland commented 7 years ago

@HartHerbert I did, all combination I can find in internet.

Nevertheless, I found a walk around by removing crossorigin="anonymous" from video element. I know it is anti-CORS-best-practice and it should've not worked, but it just works...