Sometimes API calls have CORS issues and do not show results therefore

[Piiit]

Sometimes we get no filter bubbles, sometimes no results, but this does not happen always. Seems to be related to the loading of the web component in one URL and then in the same browser session at another URL. Sometimes we get a never-ending loading spinner...

Can be tested with the external window preview of the store.

Example: https://api.webcomponents.opendatahub.bz.it/preview/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0?attribs=lat=%2246.4983%22;lon=%2211.3548%22;zoom=%2210%22;radius=%22%22;language=%22en%22;showradius=%22false%22;category-filter=%22%22;directions;

Browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://tourism.opendatahub.bz.it/api/ODHActivityPoi?pagenumber=1&pagesize=10000&searchfilter=&odhtagfilter=museen&latitude=46.4983&longitude=11.3548&radius=. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://webcomponents.opendatahub.bz.it’).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. bundle.js:867:3
    doSearch https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:867
    AsyncFunctionThrow self-hosted:693
    (Async: async)
    oncategorychange https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:741
    setup_subcategory_click https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:1083
    (Async: EventListener.handleEvent)
    setup_subcategory_click https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:1065
    setup_subcategories https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:1055
    setup_categories https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:1018
    connectedCallback https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:1105
    AsyncFunctionNext self-hosted:689
    (Async: async)
    425 https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:1317
    __webpack_require__ https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:2150
    <anonymous> https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:2204
    <anonymous> https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:2218
    <anonymous> https://cdn.webcomponents.opendatahub.bz.it/dist/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12/v1.0.0/bundle.js:2220

[davidebz]

Hi @Piiit , will this problem reproduce always or sometime? I can't reproduce it. Should we make a phone call about this?

[Piiit]

@davidebz Not always, but quite often... Let me try to give you some steps to reproduce it, if you still can't lets have a call.

1. Open https://webcomponents.opendatahub.bz.it/webcomponent/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12
2. Click on External Window Preview

or

1. Open the link in the first comment above
2. Open in a new tab --> https://webcomponents.opendatahub.bz.it/webcomponent/0e5fbede-4a21-4dd3-bf85-7d2be71dfb12

The filter bubbles do not appear in my Firefox 86.0 on Linux Mint

[davidebz]

Hi @Piiit , I confirm, I can reproduce the problem. I have found something. It's like to be related with browser cache. if I right click on "External Window Preview" and click on "Open in new Private Window" the problem does not happen. Using "Open in new Window/Tab" then the problem occurs.

Now I try to understand why browser cache causes this.

[davidebz]

This happens even in opposite side. When loading first external and then the webcomponent page the webcomponent has a problem

[davidebz]

Hi @Piiit , FOUND !!!

The problem is caused by ODH api. Look at the attached image. The same call return different "access-control-allow-orgin" AND cache-control=max-age=28300.

This means that when opening the external window it reuses the previous downloaded file but this does not contains a "*" but the previous url that does not match the current

The solution is to set a * instead of a url or disable cache

[RudiThoeni]

Hi Davide Thank you for figuring out, ok the caching library is causing it ;(

On this endpoint there is active ServerCaching AND ClientCaching enabled.....I suppose the client caching (max age ....) is causing this issue....

I was forced to activate it because of massive Requests of STA.... As usual Caching causes problems......

The Api is already configured to Allow all Access *, i don't get why the Response Headers returns access-control-allow-origin: https://webcomponents.opendatahub.bz.it

Anywhay i will not spend to much time on this because i am currently migrating the ODH api to .net core and let's have a look there if the problem persits, so let us keep open the issue

[RudiThoeni]

tried different configs..... disabled the client cache now, check if problem persists?

My framework always returns in the Response Headers access-control-allow-origin: DOMAINTHATREQUESTED

also when * is explicitely set.....

[Piiit]

@RudiThoeni @davidebz Is it solved, can we close this issue?

[RudiThoeni]

Please test i have deactivated client caching on my browser it works.....

[Piiit]

@RudiThoeni seems to work, I close it... please open new issues if you find other bugs. Good work