Next.js: API routes getting 405: Method Not Allowed for API routes

Created on 25 Jul 2019 · 8Comments · Source: vercel/next.js

Bug report

Bug Description

405: Method Not Allowed, if trying POST using APIs Route

To Reproduce

mock.js files - this file under pages/apis

function Endpoint(req, res) {
    if(req.method === "POST"){
        res.json({ message: 'POST Hello Everyone!' });
    }else{
        res.json({ message: 'ELSE Hello Everyone!' });
    }
}

export default Endpoint;

Am getting response as below upon hitting http://localhost:3000/apis/mock :-

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" type="image/x-icon" href="/static/images/logo_transparent_favi.png"/>
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" class="next-head"/>
        <meta charSet="utf-8" class="next-head"/>
        <title>405: Method Not Allowed</title>
        <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1564029052989" as="script"/>
        <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1564029052989" as="script"/>
        <link rel="preload" href="/_next/static/runtime/main.js?ts=1564029052989" as="script"/>
    </head>
    <body>
        <div id="__next">
            <div style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
                <div>
                    <style>body { margin: 0 }</style>
                    <h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">405</h1>
                    <div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle">
                        <h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">Method Not Allowed
                            <!-- -->.
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <script src="/_next/static/development/dll/dll_92fa9139568d8c3d8f78.js?ts=1564029052989"></script>
        <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{"statusCode":405}},"page":"/_error","query":{},"buildId":"development","dynamicBuildId":false}</script>
        <script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js?ts=1564029052989"></script>
        <script src="/_next/static/runtime/webpack.js?ts=1564029052989" async=""></script>
        <script src="/_next/static/runtime/main.js?ts=1564029052989" async=""></script>
    </body>
</html>

Expected behavior

Should be able to resolve Http Methods??

System information

OS: Windows
Browser (if applies) chrome, also tried postman for POST
Version of Next.js: 9.0.2

Source

krnbr

Most helpful comment

Hey @krnbr, your API routes should be under /api not /apis. POST methods are only allowed for API routes and not normal pages.

huv1k on 25 Jul 2019

🚀2

All 8 comments

Hey @krnbr, your API routes should be under /api not /apis. POST methods are only allowed for API routes and not normal pages.

huv1k on 25 Jul 2019

🚀2

thanks

krnbr on 25 Jul 2019

@huv1k How do I disable the method check? I have a custom server and now some parts of my app do not work anymore after updating to the latest version. I do not intend to use the new api directory (since I have a rather special use case).

pr4xx on 25 Jul 2019

👀2 👍1

@pr4xx could you be more specific? Or give minimal reproduction?

huv1k on 25 Jul 2019

@huv1k We proxy some incoming requests to another service which returns some json. We use this data to call nextApp.render(). The proxy handles all http verbs, but the new mechanism prevents POST requests from being processed. Is there a way to configure which paths accept certain http verbs?

pr4xx on 25 Jul 2019

@pr4xx could you show code snippet how you handle it nowadays? You are making POST request on pages and if its post then you handle it with a custom server?

huv1k on 25 Jul 2019

@huv1k In my custom server code main.js I have a middleware which captures certain requests (based on path) and proxies them to another service. The response from that service contains JSON. This JSON is used to call the following code: nextApp.render(req, res, view, responseAsJson);. view is a file under my pages directory whereas responseAsJson is the response from the proxied request. My current workaround is to replace the http verb (method) with this line: req.method = 'GET';. I am not sure if this triggers some future issues.

pr4xx on 25 Jul 2019

@pr4xx please subscribe to this issue https://github.com/zeit/next.js/issues/8045 😇

huv1k on 25 Jul 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings