I receive the error code:
Access to fetch at ‘{cloud function link}’ from origin ‘{firebase hosting domain}’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
Except, I have added unrestricted CORS access!
Here’s some helper code to describe what I’ve done
Cloud function:
@https_fn.on_request(cors=CorsOptions(cors_origins="*", cors_methods=["get", "post"]))
def queue(req: https_fn.Request) -> https_fn.Response:
"""Adds backup tasks to a Cloud Tasks queue."""
if req.method == 'OPTIONS':
# Preflight request
headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Max-Age': '3600'
}
return https_fn.Response('', status=204, headers=headers)
logger.info("Running")
... goes on to queue another function that is @on_task_dispatched
Site located in public/next/home.html but index is public/index.html:
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
const raw = JSON.stringify({
...
});
const requestOptions = {
method: "POST",
headers: myHeaders,
body: raw,
redirect: "follow"
};
fetch("https://us-central1-rizeo-40249.cloudfunctions.net/queue_video_task", requestOptions)
.then((response) => response.text())
.then(data => {
console.log('Success:', data);
alert("Submitted for processing");
})
.catch((error) => {
console.error('Error sending request:', error);
alert('Error:', error);
});
} else {
alert("Please fill in both values.")
}
Finally, here’s the firebase.json file
{
"hosting": {
"site" : "site-name",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Methods",
"value": "GET, POST, PUT, DELETE, OPTIONS"
},
{
"key": "Access-Control-Allow-Headers",
"value": "Content-Type, Authorization"
}
]
}
],
"cleanUrls": true
}
}
Casey Traina is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.