Making a POST request internally

[Fischer1234]

Website URL

digital-media-api.infinityfreeapp.com

Error Message

Error from the fetch:
Error: TypeError: NetworkError when attempting to fetch resource.

Error from the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://digital-media-api.infinityfreeapp.com/api/artists?api_key=abcd1234. (Reason: CORS request did not succeed). Status code: (null).

Other Information

Hello
I know that free hosting on infinity free does not support API hosting - But what if the API in my application only is for internal use?
I have some JavaScript and HTML inside my project, which sends a fetch request to its own URL, but with a POST request it gives an error saying the problem is something with CORS? But it works when I just want to GET or DELETE something from my internal JavaScript. Can it not work with a POST?

[Admin]

You indeed cannot use our hosting to host an API only, but you can host a PHP backend application and Javascript frontend that talks to the backend over a HTTP API.

There are two requirements to keep in mind:

• The frontend and backend must be hosted on the same hostname. So you can host your frontend at http://digital-media-api.infinityfreeapp.com and your backend at http://digital-media-api.infinityfreeapp.com/api/, but not on other hostnames.
• Our hosting only supports GET and POST HTTP methods. Other HTTP methods, like PUT, PATCH and DELETE are blocked.

But you seem to have a CORS error on a HTTP POST request. POST requests are supported, and CORS errors only happen when you try to do things across domains.

Can you share the URL to where your HTML and Javascript pages live, and tell us how we can reproduce this issue?

[Fischer1234]

My project does consist of a frontend application and a backend application, which both are on the same hostname.
The frontend lives is at: digital-media-api.infinityfreeapp.com/testing/
And the backend is at: http://digital-media-api.infinityfreeapp.com/api/

I’m not sure how you can reproduce the issue, but does it help if I show what I’m trying to do?
Here is my fecthing in my JavaScript file:

function testApi(e, endpoint, method = "GET", body = null) {
  const parentSection = e.closest("section");
  const output = parentSection.querySelector(".output");

  const options = {
    method: method,
  };

  // Add FormData body for POST
if (body && method === "POST") {
  const formData = new FormData();
  for (const key in body) {
    if (body.hasOwnProperty(key)) {
      formData.append(key, body[key]);
    }
  }
  options.body = formData;
}

  fetch(`https://digital-media-api.infinityfreeapp.com/api/${endpoint}`, options)
    .then((response) => response.text())
    .then((data) => {
      if (output) output.textContent = data;
    })
    .catch((error) => {
      if (output) output.textContent = "Error: " + error;
    });
}

and here I am calling the fetching function:

document.querySelector(".album_add").addEventListener("click", (e) =>
  testApi(e.currentTarget, "albums", "POST", {
    title: "New album",
    artist_id: 2,
  })
);

Hope this maybe helps?

[Admin]

The code isn’t usable right away, but it does help! And I think I found the issue.

The problem is that your website is using http://, but you are making the fetch request to https://. However, when you try to visit that URL directly, you will see that your website does not have a valid SSL certificate.

Firefox pointed me to this article for more information about the error:

Reason: CORS request did not succeed - HTTP | MDN

And this article specifically lists:

Trying to access an https resource that has an invalid certificate will cause this error.

So that’s why you get the error.

---

To fix this, you can do two things:

• As a workaround, you can change https:// to http:// in the fetch function, or just change it to //digital-media-api.infinityfreeapp.com/api/${endpoint} so it will use https:// if you are viewing the page with https:// and http:// if you are viewing it with http://.
• If you want your website to support HTTPS, you’ll need to install a valid SSL certificate. We provide those for free, but you will have to go through a setup procedure for it: How to get Free SSL (HTTPS) on InfinityFree

[Fischer1234]

Wow, thank you! I did not see that mistake
It works now with POST! Thanks for telling me that DELETE and PUT doesn’t work, so I don’t need to fight with that anymore.

Thank you very much for your help!