# Ajax Calls From Imported External Web Components in PWAs

**URL:** https://forum.kirupa.com/t/ajax-calls-from-imported-external-web-components-in-pwas/639521
**Category:** web dev
**Created:** [March 19, 2019, 8:40am UTC](https://forum.kirupa.com/t/ajax-calls-from-imported-external-web-components-in-pwas/639521 "2019-03-19T08:40:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)
#### Post date: [March 19, 2019, 8:40am UTC](https://forum.kirupa.com/t/ajax-calls-from-imported-external-web-components-in-pwas/639521/1 "2019-03-19T08:40:09Z")

</div>

Hi,

I have many web components that are located in different servers. They all get combined in one master ui that uses these web components. The problem is, the Ajax calls from these external web components that get imported will get called from the master ui app and not the web component external URL/host.

Can I make it so that the web components imported uses their remote host and not the local host of the importee when used?

---

<div class="post-metadata">

### Author: ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)
#### Post date: [March 19, 2019, 10:40pm UTC](https://forum.kirupa.com/t/ajax-calls-from-imported-external-web-components-in-pwas/639521/2 "2019-03-19T22:40:19Z")

</div>

If anyone wants to know how I found a way its by getting the script module src url and using that to call external calls from imported web components.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 20, 2019, 3:58am UTC](https://forum.kirupa.com/t/ajax-calls-from-imported-external-web-components-in-pwas/639521/3 "2019-03-20T03:58:52Z")

</div>

TBH, I’m not fully sure what you are describing. Won’t the URL for the Ajax call be hard-coded to your component? Or do you have it somehow inferring its value based on where it is hosted?

---

<div class="post-metadata">

### Author: ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)
#### Post date: [March 21, 2019, 11:41am UTC](https://forum.kirupa.com/t/ajax-calls-from-imported-external-web-components-in-pwas/639521/4 "2019-03-21T11:41:02Z")

</div>

@kirupa please take a look at the following example:

```
( function ( path ) {
    var baseUrl = path.slice( 0, path.lastIndexOf( '/' ) )
    customElements.define( 'kirupa-web-component', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${baseUrl}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url )
```