API in Component not working after Deployment

Block.js =>

const bm = editor.BlockManager;
  const canvas = editor.Canvas
  bm.add('comp-block', {
      label: 'Component',
      category: 'Extra',
      content: {
        type: 'component-test'
      },
      attributes: {
          class: 'fa fa-bars'
      },

  });

Component.js =>

editor.DomComponents.addType('component-test', {
      model: {
        defaults: {
          endpoint: '   //  API URL  //  ', 
          traits: [
            {
              type: 'select',
              name: 'endpoint',
              changeProp: 1,
              options: ['endpoint'],
            }
          ]
        },
        init() {
          this.listenTo(this, 'change:endpoint', this.refreshContent);
          this.refreshContent();
        },
         refreshContent() {
          const { endpoint } = this.attributes;
          const response =  axios.get(endpoint,
          {
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            }
          })
           var result= //  API Response  //
              this.components(result);
        } 
      }
    });

We are able to call the API and it works in Deployment when we are passing the whole html with script, body, style in Content attribute of Block Manager

Content :
 <script>
    var request = new XMLHttpRequest()
          request.open('GET',' //    API URL    // ', true)
          request.setRequestHeader("Content-type", "application/json;charset=UTF-8");
          request.setRequestHeader("Accept", "application/json, text/plain, */*");
           request.onload = function(){
          var jsonData = JSON.parse(this.response)
        
          request.send()
</script>

But when the API is called through the Component it's not working when the page loads in deployment. It only works when i drop it on the editor and not when it loads as a deployed url.

Ex:

model: {
		defaults: {
			endpoint: ' API URL ', // some prop for the trait
			traits: [
				{
					type: 'select',
					name: 'endpoint',
					changeProp: 1,
					options: [ 'endpoint' ],
				}
			]
		},
		init() {
			this.listenTo(this, 'change:endpoint', this.refreshContent);
			this.refreshContent();
		},
		async refreshContent() {
			const { endpoint } = this.attributes;
			const response = await fetch(endpoint);
			...
			let result = '';
			// ...  HTML result from the async response
			...			
			this.components(result);
		}
	}