How to resolve 405 'Method not Found' - http error on 'Github Pages's API request to a REST API server here on glitch.me site

Glitch Help
, ,
1

First of all, thank you for this amazing Glitch service. I am now able to host my backend here on the glitch cloud — well not quite yet.

I have my backend server setup here on glitch site. I have only 1 GET http method and multiple POST methods. My GET URI is: https://tenzinhub-api.glitch.me/api/ttc/routes/all

My frontend is developed via Nuxt.js (Vue.js) and hosted on Github Pages. I have successfully confirmed that my Glitch-hosted backend is able to serve my locally compiled (development mode). It is also confirmable since the above link shows a lengthy JSON data.

However, my ‘Github Pages’ hosted static website is unable to get API data. The ERROR message simply says I have a ‘405’ error code - this is the ‘Method Not Allowed’.

I initially thought I had a CORS problem since I was giving a PORT number of 3001. However, even after enabling CORS for every website, this problem still persists, so this is not CORS.

My current suspicion is that Glitch is not allowing Github Page hosted website, since the error code 405 is mysterious and not easy to resolve.

My code are public:

  • for my backend, I’m using express.js.
  • for my frontend (in github):
  • I’m using Nuxt.js, $http (which internally uses ky), proxy enabled obviously

Any help is appreciated. Please feel free to ask any further questions if I need to clarify something. Thank you for reading

1 Like
2

Hello there!

Are you now using PORT 3000?

1 Like
3

Nah, I mean I was sending the options object with the port field of 3001 previously. I decided not to send any port field since I don’t know the port number used by glitch. Not sending any port number (or anything) means CORS is supported for all external websites.

Basically app.use(cors({ port: 3001 })); vs. app.use(cors());

Your reply on the other post was seems helpful. I’ll try to set a header for ‘User-Agent’ field with that string and come back.

4

@khalby786
Thanks for your help. I have now solved my problem.

I am not sure if it’s from the ‘User-Agent’ field, but I did that and also more importantly, I hardcoded my server API prefix in my GET and POST methods: https://tenzinhub-api.glitch.me/api
(Previously, as is the norm, my nuxt.config.js file has proxy handler etc that automatically converts GET method URI to have the server URL prefix.)

I think Github Pages being static-only hosting site is a major factor since imo the proxy handler creates the api endpoint at client side and redirects to the server side - Github Pages may not support this imo.
(Edit: I missed prefixing server URL for one POST method and that gave me the 405 error again. I fixed it and that proves giving full server URL as prefix is really needed. The ‘User-Agent’ is also probably important, as I am using that here. no harm done)

My first update with the ‘User-Agent’ field didn’t immediately work, then I hardcoded my server URL prefix with the '/api', it could be that there was a delay and the fix could have been the 'User-Agent'.

Anyways, one of these 2 fixed my problem. Now I can make more full-stack projects in the future. Thanks.

Reference:

* Useful Glitch post regarding REST API

2 Likes
5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.