I'm trying to use the feature of slipping HTML into text in apps, along with the very-not-document "mappings" feature to try to see if I can build some more advanced app interfaces. Right now, it is all exploratory. I don't really have an application yet, but I do have a couple I'm tossing around in my head.
The problem I'm running into is this. I can't find any way to get around the CORS issue.
In my app, I have the OAUTH setup, and have verified that my technique works with curl, so the code itself is good. My mappings look like this:
mappings()
{
path("/test")
{
action: [GET: "testGET"]
}
path("/testPOST")
{
action: [POST: "testPOST"]
}
}
I've got the functions defined here:
def testGET()
{
logMessage(type:"info",message:"GET received")
logMessage(type:"debug",message:"request: ${request}")
logMessage(type:"debug",message:"params: ${params}")
html="""<html><head><title>GET Received</title></head><body><b>GET Received</b><br/><a href="http://myhubitat.smarthome/installedapp/configure/442/MainPage">Return</a></body></html>"""
render(contentType: "text/html",data:html,status:200)
}
def testPOST()
{
logMessage(type:"info",message:"POST received")
logMessage(type:"debug",message:"request: ${request}")
logMessage(type:"debug",message:"params: ${params}")
html="""<html><head><title>POST Received</title></head><body><b>POST Received</b><br/><a href="http://myhubitat.smarthome/installedapp/configure/442/MainPage">Return</a></body></html>"""
render(contentType: "text/html",data:html,status:200)
}
If I use curl like this:
curl --header "Content-Type: application/json" --request POST --data '{"dummy":"nothing"}' http://192.168.4.56/apps/api/442/testPOST?access_token=<token>
It works just fine. However, when I move over to a web page with code like this in JavaScript:
function POSTTest()
{
params=new URLSearchParams({
access_token: "<token>"
})
headers=new Headers();
headers.append('Content-Type','applicatoin/json')
headers.append('method','no-cors')
fetch("http://192.168.4.56/apps/api/442/testPOST?" + params.toString(),
{
method: "POST",
body: JSON.stringify({dummy: "nothing"}),
headers: headers
}
)
.then((response)=>{
if(!response.ok){
console.log("Network response was not ok")
}
return response.json()
})
.then(data=>{
console.log(data)
})
.catch(error=>{
console.log(error)
})
}
It fails. Taking out the no-cors doesn't help at all. With it or without it, I get the Fetch Failed error related to a CORS issue.
TypeError: Failed to fetch
at POSTTest (c:\Users\kurtg\Documents\Hubitat Code Archive\SVG Experiments\test1.html:212:13)
at HTMLButtonElement.onclick (file:////test1.html:18:34) {stack: 'TypeError: Failed to fetch
at POSTTest (fâŚ20Archive/SVG%20Experiments/test1.html:18:34)', message: 'Failed to fetch'}
I did see that MAKER API has an option to get around the CORS issue, but I can't POST to MAKER. I anticipate cases where I want to move a fairly large amount of data and doing that via the query string really seems stupid and maybe not even possible.
Is there a way around this? If not, what good is the mappings function? I get the CORS error on GET requests too, but because of the way a GET is processed verses a POST, it "sneaks through" and works.
Some of the things I've tried are embedding my JavaScript right into the App definition (which is my final goal, but for now I'm testing with stand alone web pages) and I've tried running off computers on the same VLAN with the HE. I always get the same error. The only thing that does work is curl.
Thoughts?
