Cross origin error when trying to reference external JS file
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
|
show 4 more comments
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
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
|
show 4 more comments
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
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
javascript html reactjs create-react-app
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
|
show 4 more comments
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
|
show 4 more comments
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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