0

we uses ionic angular for our iOS app. we stores our assets files in server to dynamically update the assets when we need

but when iam trying to access a json file for lottie animation it's not loading cors blocks fetching the file giving below error message in console 

            <lottie-player
              [src]='lottieFile'
              background="transparent"
              speed="1"
              style="
                width: 70px;
                height: 60px;
                margin: auto;
                position: relative;
                top: -5px;
              "
              loop=""
              autoplay=""
            ></lottie-player
          >

[Error] Failed to load resource: Origin capacitor://testApp.com is not allowed by Access-Control-Allow-Origin. Status code: 200 (male.json, line 0)

but for png and jpeg file it fetches the file correctly

i copied below from network values are not actual due to restriction


Summary
URL: https://imgassets.assetServer.co/cat117.jpg
Status: 200
Source: Network
Address: 192.57.22.48:463
Initiator: 
platform-browser.js:744


Request
:method: GET
:scheme: https
:authority: imgassets.assetServer.co
:path: /cat117.jpg
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Accept-Language: en-IN,en-GB;q=0.9,en;q=0.8
Connection: keep-alive
Accept-Encoding: gzip, deflate, br
Host: imgassets.assetServer.co

Response
:status: 200
Content-Type: image/jpeg
Last-Modified: Thu, 23 Aug 2018 09:11:00 GMT
Age: 1571
Expires: Tue, 21 Mar 2023 08:16:32 GMT
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?sfaffaf44w4rtaj:Fejefa;;ejmfrijalfr;afjakfaokf;"}],"group":"cf-nel","max_age":604800}
Cache-Control: max-age=259200,public
Date: Mon, 30 Jan 2023 10:59:45 GMT
Content-Length: 23597
ETag: "jfekjij323u9w53orjoejaiof"
Vary: Accept-Encoding
Accept-Ranges: bytes
cf-polished: origSize=23605, status=webp_bigger
x-amz-id-2: 
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Server: cloudflare
cf-cache-status: HIT
x-amz-request-id: WQEIKEJK3eaafef3TEJKEY56
cf-bgj: imgq:100,h2pri
cf-ray: 9867eih3h7e-BOM

but for json files there is no response in network

below 

Summary
URL: https://imgassets.assetServer.co/male.json
Status: —
Source: —
Initiator: 
zone.js:3382


Request
Origin: capacitor://testApp.in
Accept: */*
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Response
No response headers

is there any hack to solve this issue? or can i overcome this by capacitor http plugin which don't have cors restriction?

sinan
  • 133
  • 8
  • Make sure that the server supports the CORS policies – Ankit Agarwal Jan 30 '23 at 11:33
  • @AnkitAgarwal i don't have access to server, only json assets getting cors restriction – sinan Jan 30 '23 at 11:34
  • 1
    Displaying an image with an `` element does not require permission via CORS. Reading data into JavaScript does require permission via CORS. – Quentin Jan 30 '23 at 11:37
  • @Quentin iam fetching the asset file like this why this getting cors restriction, is this diffrent from a normal element – sinan Jan 30 '23 at 11:41
  • @sinan — Umm. Yes. Very much so. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements – Quentin Jan 30 '23 at 11:43
  • @Quentin for ios development we using ionic-angular which runs on webview for android we uses java ,for android platform he is able to load these files,can i overcome this cors error by some hack in ionic angular? – sinan Jan 30 '23 at 12:00

0 Answers0