Currently, I am in the process of developing a web application using Node.js and Express. Everything seems to be functioning properly when I deploy my project to Heroku; however, I encountered an issue whenever I attempt to execute any action that involves making an AJAX call to the API I'm utilizing:
An error message stating "Mixed Content" appears on the page loaded over HTTPS, while requesting an insecure XMLHttpRequest endpoint from . This request has been blocked as per security measures, demanding that all content must be served over HTTPS.
The API I am working with contains data related to farmers' markets, developed by the USDA, and I have adhered to their recommended format for RESTful AJAX requests:
$.ajax({
type: 'GET',
url: 'http://search.ams.usda.gov/farmersmarkets/v1/data.svc/mktDetail?id=' + id,
async: false,
success: function (data) { ... }
})
I have conducted extensive research on platforms like Stack Overflow regarding this Mixed Content issue. Most suggestions propose changing the 'GET' request route to "https://..." to function effectively on Heroku's https server. I attempted this alteration, but it resulted in a 404 Not Found error for the API route. Another attempt involved switching to a relative link in the form of url: '//search.ams...', yet it led to the same 404 error. It appears crucial to use an http:// link to access the API successfully.
Any advice or method to persuade Heroku to allow the utilization of an "http" link instead of https, or any alternative approach to execute the request successfully?