cordova create - install browser - plugins.js” was blocked about cordova-browser

[pcwSlide]

Ok so I have spent another 4 hours on this.
Steps:

1. Create a standard cordova project.
2. Add platform browser
3. run cordova run browser

Get this error immediately - in 2 pc's

Most other errors removed with Context-security - everything open in index.html

The issue is with the Browser Platform. When I run cordova run browser I get this error: The resource from “http://localhost:8000/cordova_plugins.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Because of this -> Loading failed for the <script> with source “http://localhost:8000/cordova_plugins.js”

Am I right in thinking I need to change a MINE instruction in the server setting in localhost:8000? I don't know where this server comes from - I assume Browser Platform - help!!

Breautek - I have never had this issue in 7 years using Browser. Could you point me in the right direction please?
Thanks
Phil

PS: I bizarre thing id that my old project still work..

[pcwSlide]

Ok - another 4 hours.

So in some (other) project structures (which I made recently ) there is no errors when the cordova browser page loads. I have swapped the browser folder for that working project into the one that was not and bingo - no errors. - what??

Not sure why as yet..

But when I add the post link to express/cors I get this error - kind of the same sniff error

So the gets work to express - not the post. I can send you the files if it would help?

[breautek]

The issue is with the Browser Platform. When I run cordova run browser I get this error: The resource from “http://localhost:8000/cordova_plugins.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The cordova_plugins.js file doesn't exist and this is indicated by the fact that the server is returning 404. What is likely happening is because the file doesn't exist, the server is returning back an error response that is textual, instead of what would be expected an text/javascript response.

I believe I ran into this issue before, not with the browser platform, but likely the same issue... the cordova_plugins.js doesn't get generated until at least one plugin is added to the project. If you don't actually use any plugins and if it doesn't prevent page load, then it might be safe to ignore this error.

So the gets work to express - not the post. I can send you the files if it would help?

Based on your provided images, you have two servers: the cordova server (the localhost:8000 server) and another server running on port 3000 which is presumed to be your NodeJS/express server. This will be cross-origin so CORS will be effect, and you'll have to respond with the proper CORS headers on your express. I do have the blog post that goes into more details, it's tailored for the WKWebView on iOS, but the same concept applies here. You may want to actually lock down 'Access-Control-Allow-Origin' to the actual origin (in this cause localhost:3000).

OR

The cordova server is meant to be a simple quick way to test the browser application. It's not really meant for production use. And because you already have an express server, you can probably configure it route to platforms/browser/www and then everything will be hosted on the same server and you'll gain benefits of being on the same origin.

[pcwSlide]

Firstly I greatly appreciate your help - I have spent most of the weekend on this.

What I don't understand Norman is that I have done this same exercise for the last 3 years - and more. So something has changed.

Q1: if you just create a project -> cordova create Test -> cordova platform add browser-> cordova run browser

Do you get errors?? - I got the same errors on 2 machines. I can fix the first one and even the second - but it comes back when I try a post - so strange..

Q2. Could you look at this simple example project - this will be quicker as you will see the code..( I have removed the node_modules folders in the client and server for ease of transfer)

Apologies for taking up your time..I am desperate as I need this fixed for the next 3 weeks

Cheers and THANKYOU!

Phil
Full-Stack -Cordova-Browser - POST - Fails.zip

[pcwSlide]

Norman - please hold - I am trying another route of investigation..

[erisu]

Q1: if you just create a project -> cordova create Test -> cordova platform add browser-> cordova run browser

Do you get errors?? - I got the same errors on 2 machines. I can fix the first one and even the second - but it comes back when I try a post - so strange..

That is the default behavior and is expected. Those errors are not breaking issues.

Since Firefox 72, top-level directories avoid MIME sniffing. From MDN,

nosniff
Blocks a request if the request destination is of type style and the MIME type is not text/css, or of type script and the MIME type is not a JavaScript MIME type

Since the cordova_plugins.js file does not exist, it returns a 404 HTML page and is nota valid MIME type for the script tag. This is why you are seeing the nosniff error message in console.

These error message should not be an issue. Its more of a warning printout. The application should continue to load, run, and fire the device read event, which I have tested.

The cordova_plugins.js file does not exsit because you have not installed any plugins for the browser platform.

Try adding the device plugin as an example:

cordova plugin add cordova-plugin-device@latest

Then run the browser platform and notice the error is gone.

This is because now a plugin was added with browser support to create the file.

This ticket should be closed as not an issue.

[erisu]

So the gets work to express - not the post. I can send you the files if it would help?

In regards to this issue, your XHR Request URL is bad.

http://localhost:8000/192.168.1.7:3000/postData

It seems your building a request URL incorrectly and appending some remote server address to the application's URL. This should be changed.

[pcwSlide]

1. erisu - Yes I agree with your comment above - in fact that's why I put the hold message to Norman - I came to the same conclusion. So that issue - solved.
2. Yes I know the URL looks incorrect..But I can't see why..

So I use the following - this is a direct copy from an old working project.

Can you see an issue with this? They both work in straight HTML - just not when served by the Browser Platform.

let tmpName = $("#name").val();
let tmpAge = $("#age").val();
$.ajax({
method: "POST",
url: "http:/localhost:3000/postData",
contentType: "application/json; charset=utf-8",// important
dataType : "json",
data: {"name":tmpName, "age":tmpAge} // stringify converts the Javascript Array to json datatype!
}).done(function( data ,statusText,xhrObj) {

alert( "The status text is : " + statusText +
"\nThe status is: " + xhrObj.status );
});

OR

$.post("http:/192.168.1.7:3000/postData", {name:tmpName, age:tmpAge}, "application/json; charset=utf-8","json",
function(data,status){
alert("The status is : " + status + "\nThe data is : " + data.msg);
});

Appreciate any help..

[erisu]

I am not sure if it is the formatting, but your URLs is slightly wrong.

http:/localhost:3000/postData

and

http:/192.168.1.7:3000/postData

You wrote, http:/, with a single slash. It should be double slashed, http://.

I dont know if that makes a difference, but I would think it would...

Also do you have any special plugins that override the ajax requests?

[pcwSlide]

OMG!!!!!! Clearly I need a break, Thank you for seeing the clearly obvious.. Apologies to all..

Thanks!!