Mixed content error


#1

I’m trying to follow the clementine.js tutorial here:
http://www.clementinejs.com/tutorials/tutorial-beginner.html

and I’m getting the following error message in my console:

_clickController.client.js:31 Mixed Content: The page at ‘https://fcc-voting-application-txsrangers.c9users.io/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://localhost:8080/api/clicks’. This request has been blocked; the content must be served over HTTPS.

How can I go about making my localhost HTTPS to get rid of this error?

Thanks in advance for any help provided!


#2

I’m assuming this is because you’re previewing this page in the IDE, correct? Try going to the preview URL in a separate tab. You won’t be able to make any requests to external https endpoints within the IDE preview windows as the preview window is in an iframe.


#3

I’m clicking on a new tab in chrome and pointing it to the URL:
https://fcc-voting-application-txsrangers.c9users.io
Is this not the correct way to view the app?


#4

Gotcha, sorry, I misunderstood what was going on here. There’s a couple issues: you’ll want to hit an https:// endpoint because you are on an https page; that’s the source of the mixed-content issue.

The other thing is that you’ll want to make sure you’re pointing to the correct URL. localhost when run from your browser means that it’s pointing to that computer’s localhost, so in this case, it’s looking at port 8080 on your desktop. Assuming it’s trying to call the IDE, you’ll want to change that to the workspace URL. Try to point this to https://fcc-voting-application-txsrangers.c9users.io:8080/api/clicks instead.


#5

I’m pretty sure it’s calling the localhost of the IDE. I tried changing it to HTTPS like you said, and I get this error:
clickController.client.js:31 GET https://localhost:8080/api/clicks net::ERR_CONNECTION_REFUSED
ajaxRequest @ clickController.client.js:31
(anonymous) @ clickController.client.js:39
(anonymous) @ clickController.client.js:49


#6

when I use https://fcc-voting-application-txsrangers.c9users.io:8080/api/clicks, I get the error:
fcc-voting-application-txsrangers.c9users.io/:1 XMLHttpRequest cannot load https://fcc-voting-application-txsrangers.c9users.io:8080/api/clicks. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://fcc-voting-application-txsrangers.c9users.io’ is therefore not allowed access.


#7

Please try removing the :8080 sections and see if that changes anything.


#8

I do believe this fixed my problem. It seems to be working now. Thank you!