Cross origin error when trying to reference external JS file












0















I have a react app (runs with webpack) with a file within it that I want to access externally from a script tag.



I have inserted the script-tag into the external site; it has a src which points towards the JS file where I am tying to iFrame some content. I am inserting the script-tag because this is how this works with shopify.



My script tag, inserted into an external site looks like this (referencing my JS file:



<script type="text/javascript" async="" 
src="https://57584930.ngrok.io/Scripts/javascript.js?
shop=daleandkiko.myshopify.com"></script>


This is hopefully going to point towards my js file, which just for testing purposes I am trying to iframe the google page:



function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}


The file structure is this:



Client
/ Scripts
/ javascript.js



When I hit this endpoint is directs to the react app anyway, as the normal
https://57584930.ngrok.io URL does, so I'm a bit lost here, Am i referencing the file correctly?



Within the external site I get this error:



(index):73 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://57584930.ngrok.io/Scripts/javascript.js?shop=daleandkiko.myshopify.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.



Is this how it works or is this different because it's a create-react-app?










share|improve this question




















  • 1





    When I try to visit the ngrok.io url you've provided, I get an HTML page stating "Tunnel 57584930.ngrok.io not found".

    – kevin628
    Jan 1 at 14:57











  • Sorry Kevin I deliberately provided a false one

    – Sparlarva
    Jan 1 at 15:24











  • the real url would be 633bf6e9.ngrok.io/Scripts/javascript.js... The other stuff on the end shopify add on when its loaded

    – Sparlarva
    Jan 1 at 15:25








  • 1





    When I visit that link, I don't get JavaScript. I get a full webpage. I doesn't make sense to try to load a full webpage as a script.

    – kevin628
    Jan 1 at 15:29






  • 1





    I would definitely recommend using a node server instead. Webpack's server is only intended for development, not production.

    – kevin628
    Jan 1 at 15:33
















0















I have a react app (runs with webpack) with a file within it that I want to access externally from a script tag.



I have inserted the script-tag into the external site; it has a src which points towards the JS file where I am tying to iFrame some content. I am inserting the script-tag because this is how this works with shopify.



My script tag, inserted into an external site looks like this (referencing my JS file:



<script type="text/javascript" async="" 
src="https://57584930.ngrok.io/Scripts/javascript.js?
shop=daleandkiko.myshopify.com"></script>


This is hopefully going to point towards my js file, which just for testing purposes I am trying to iframe the google page:



function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}


The file structure is this:



Client
/ Scripts
/ javascript.js



When I hit this endpoint is directs to the react app anyway, as the normal
https://57584930.ngrok.io URL does, so I'm a bit lost here, Am i referencing the file correctly?



Within the external site I get this error:



(index):73 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://57584930.ngrok.io/Scripts/javascript.js?shop=daleandkiko.myshopify.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.



Is this how it works or is this different because it's a create-react-app?










share|improve this question




















  • 1





    When I try to visit the ngrok.io url you've provided, I get an HTML page stating "Tunnel 57584930.ngrok.io not found".

    – kevin628
    Jan 1 at 14:57











  • Sorry Kevin I deliberately provided a false one

    – Sparlarva
    Jan 1 at 15:24











  • the real url would be 633bf6e9.ngrok.io/Scripts/javascript.js... The other stuff on the end shopify add on when its loaded

    – Sparlarva
    Jan 1 at 15:25








  • 1





    When I visit that link, I don't get JavaScript. I get a full webpage. I doesn't make sense to try to load a full webpage as a script.

    – kevin628
    Jan 1 at 15:29






  • 1





    I would definitely recommend using a node server instead. Webpack's server is only intended for development, not production.

    – kevin628
    Jan 1 at 15:33














0












0








0








I have a react app (runs with webpack) with a file within it that I want to access externally from a script tag.



I have inserted the script-tag into the external site; it has a src which points towards the JS file where I am tying to iFrame some content. I am inserting the script-tag because this is how this works with shopify.



My script tag, inserted into an external site looks like this (referencing my JS file:



<script type="text/javascript" async="" 
src="https://57584930.ngrok.io/Scripts/javascript.js?
shop=daleandkiko.myshopify.com"></script>


This is hopefully going to point towards my js file, which just for testing purposes I am trying to iframe the google page:



function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}


The file structure is this:



Client
/ Scripts
/ javascript.js



When I hit this endpoint is directs to the react app anyway, as the normal
https://57584930.ngrok.io URL does, so I'm a bit lost here, Am i referencing the file correctly?



Within the external site I get this error:



(index):73 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://57584930.ngrok.io/Scripts/javascript.js?shop=daleandkiko.myshopify.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.



Is this how it works or is this different because it's a create-react-app?










share|improve this question
















I have a react app (runs with webpack) with a file within it that I want to access externally from a script tag.



I have inserted the script-tag into the external site; it has a src which points towards the JS file where I am tying to iFrame some content. I am inserting the script-tag because this is how this works with shopify.



My script tag, inserted into an external site looks like this (referencing my JS file:



<script type="text/javascript" async="" 
src="https://57584930.ngrok.io/Scripts/javascript.js?
shop=daleandkiko.myshopify.com"></script>


This is hopefully going to point towards my js file, which just for testing purposes I am trying to iframe the google page:



function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}


The file structure is this:



Client
/ Scripts
/ javascript.js



When I hit this endpoint is directs to the react app anyway, as the normal
https://57584930.ngrok.io URL does, so I'm a bit lost here, Am i referencing the file correctly?



Within the external site I get this error:



(index):73 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://57584930.ngrok.io/Scripts/javascript.js?shop=daleandkiko.myshopify.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.



Is this how it works or is this different because it's a create-react-app?







javascript html reactjs create-react-app






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 1 at 14:53







Sparlarva

















asked Jan 1 at 14:17









SparlarvaSparlarva

19710




19710








  • 1





    When I try to visit the ngrok.io url you've provided, I get an HTML page stating "Tunnel 57584930.ngrok.io not found".

    – kevin628
    Jan 1 at 14:57











  • Sorry Kevin I deliberately provided a false one

    – Sparlarva
    Jan 1 at 15:24











  • the real url would be 633bf6e9.ngrok.io/Scripts/javascript.js... The other stuff on the end shopify add on when its loaded

    – Sparlarva
    Jan 1 at 15:25








  • 1





    When I visit that link, I don't get JavaScript. I get a full webpage. I doesn't make sense to try to load a full webpage as a script.

    – kevin628
    Jan 1 at 15:29






  • 1





    I would definitely recommend using a node server instead. Webpack's server is only intended for development, not production.

    – kevin628
    Jan 1 at 15:33














  • 1





    When I try to visit the ngrok.io url you've provided, I get an HTML page stating "Tunnel 57584930.ngrok.io not found".

    – kevin628
    Jan 1 at 14:57











  • Sorry Kevin I deliberately provided a false one

    – Sparlarva
    Jan 1 at 15:24











  • the real url would be 633bf6e9.ngrok.io/Scripts/javascript.js... The other stuff on the end shopify add on when its loaded

    – Sparlarva
    Jan 1 at 15:25








  • 1





    When I visit that link, I don't get JavaScript. I get a full webpage. I doesn't make sense to try to load a full webpage as a script.

    – kevin628
    Jan 1 at 15:29






  • 1





    I would definitely recommend using a node server instead. Webpack's server is only intended for development, not production.

    – kevin628
    Jan 1 at 15:33








1




1





When I try to visit the ngrok.io url you've provided, I get an HTML page stating "Tunnel 57584930.ngrok.io not found".

– kevin628
Jan 1 at 14:57





When I try to visit the ngrok.io url you've provided, I get an HTML page stating "Tunnel 57584930.ngrok.io not found".

– kevin628
Jan 1 at 14:57













Sorry Kevin I deliberately provided a false one

– Sparlarva
Jan 1 at 15:24





Sorry Kevin I deliberately provided a false one

– Sparlarva
Jan 1 at 15:24













the real url would be 633bf6e9.ngrok.io/Scripts/javascript.js... The other stuff on the end shopify add on when its loaded

– Sparlarva
Jan 1 at 15:25







the real url would be 633bf6e9.ngrok.io/Scripts/javascript.js... The other stuff on the end shopify add on when its loaded

– Sparlarva
Jan 1 at 15:25






1




1





When I visit that link, I don't get JavaScript. I get a full webpage. I doesn't make sense to try to load a full webpage as a script.

– kevin628
Jan 1 at 15:29





When I visit that link, I don't get JavaScript. I get a full webpage. I doesn't make sense to try to load a full webpage as a script.

– kevin628
Jan 1 at 15:29




1




1





I would definitely recommend using a node server instead. Webpack's server is only intended for development, not production.

– kevin628
Jan 1 at 15:33





I would definitely recommend using a node server instead. Webpack's server is only intended for development, not production.

– kevin628
Jan 1 at 15:33












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996193%2fcross-origin-error-when-trying-to-reference-external-js-file%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996193%2fcross-origin-error-when-trying-to-reference-external-js-file%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

How to fix TextFormField cause rebuild widget in Flutter

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith