CORS: why is link <script> in index.html loading from Origin http:// on *device*?

Usually CORS issues come up from the browser, but not from devices and emulators, because their origins are file:/// not http:// and XSS doesn’t apply to that, afaik.

However, when trying to link js in my index.html, for example, I see the Origin is http:// and not file:///, so I get the dreaded error:

XMLHttpRequest cannot load http://ws.mysite.com/ionic-feed/www/templates/share.html. Origin http://10.0.0.5:8100 is not allowed by Access-Control-Allow-Origin.

An excerpt from my index.html

<script src="ws.myserver.com/ionic-feed/www/js/file1.js"></script>
<script src="js/file2.js"></script>

I’m using .NET and IIS 8.5.

I’m able to $http.get from this server, at the same subdomain. I’ve enabled CORS in the .NET web-api project (for browser development etc).

But, when I try to load .js files in index.html through , or in AngularJS directives templateUrl: “ws.myserver.com/…” then I get the error.

I’ve been serving these .js files from the same domain as the .NET web-api project to try to avoid CORS issues of those .js files then requesting $http.get from the web-api, so I’ve added a Virtual Directory and Application inside the IIS site for the ws.myserver.com web-api project.

I’ve tried placing web.config files in those application and virtual directories as suggested here. http://enable-cors.org/server_iis7.html That hasn’t worked yet.

How do I fix this?

Thanks!!!

@mhartington Any ideas?

Why put the templates on a server? That kind of code should be on the device.
Any ways, not to familiar with .net/iis

Are you sure you have everything set up correctly?

I put the templates and my .js files on the server so I can dynamically alter the app from the server without resubmitting to apple for each and every little change and wait 1 week for approval.

I’d think this is one of the strong arguments for making a hybrid web app in the first place.

I’d think this is one of the strong arguments for making a hybrid web app in the first place.

It is, but Ionic is built on AngularJS and one of the fundamental pillers of Angular is the MVC, the ability to build single-page applications where all you’re getting from the server is some data to fill into model that will appear in the view. This way you could change server stack easily (it just handles JSON, not building pages) and not have to rewrite any of your client-side angular stuff, for example.

Now Ionic doesn’t need AngularJS, it can be used as a CLI and a CSS framework, but it throws out a ton of useful Ionic functionality. So in my opinion, if you go Ionic you go Angular, and if you go Angular you generally don’t want to render server side.

Rendering server side is a completely fine way to go, but I don’t think AngularJS ought to be used if you go down that path, and with that Ionic.

Anyway, CORS is a complete nightmare to me, too. Just to be clear, you’re now getting CORS issues on your device, too (not just your machine’s browser?). Cause I ran into constant CORS issues (even when letting the server allow every header) and I currently develop in the browser by disabling cors security on Chrome, there’s no other way for me. But on the device I never have any problems.

Yes, it was on device, and the device was loading not from file:/// but http:// as I showed above.

Remote file loading is working now, but I took a detour to fix it.

It is, but Ionic is built on AngularJS and one of the fundamental pillers of Angular is the MVC, the ability to build single-page applications where all you’re getting from the server is some data to fill into model that will appear in the view.

Even with AngularJS, I’m able to change my controllers, directives and templates dynamically, by loading them on the fly, and this gives me much more control than loading merely data from the server – any technology solution whatsoever can do that.

What’s special about running an interpreted language instead of, say, Xamarin or native, is that I can easily alter the code on the fly.