cli: function redirects are not working with netlify dev

Note: I’m still working on a minimal reproduction, but you can check on the live site.

Do you want to request a feature or report a bug?

🐛 bug

What is the current behavior?

First, see this Twitter discussion with @jlengstorf.

I defined the following redirect in netlify.toml.

[[redirects]]
    from = "/api/*"
    to = "/.netlify/functions/:splat"
    status = 200

Then in my application I have a serverless function located at /.netlify/functions/subscribe. I hit it via a POST request using the browser’s fetch API like this.

const options = {
    method: "POST",
    body: JSON.stringify(data),
    headers: {"Content-Type": "application/json"},
}

const response = await fetch("/api/subscribe", options)

It returns an HTML document rather than the expected JSON output.

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="note" content="environment=development"/><title data-react-helmet="true"></title><link href="https://fonts.googleapis.com/css?family=Inter|Roboto|Patua+One" rel="stylesheet"/><style type="text/css">
    .anchor.before {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-100%);
      padding-right: 4px;
    }
    .anchor.after {
      display: inline-block;
      padding-left: 4px;
    }
    h1 .anchor svg,
    h2 .anchor svg,
    h3 .anchor svg,
    h4 .anchor svg,
    h5 .anchor svg,
    h6 .anchor svg {
      visibility: hidden;
    }
    h1:hover .anchor svg,
    h2:hover .anchor svg,
    h3:hover .anchor svg,
    h4:hover .anchor svg,
    h5:hover .anchor svg,
    h6:hover .anchor svg,
    h1 .anchor:focus svg,
    h2 .anchor:focus svg,
    h3 .anchor:focus svg,
    h4 .anchor:focus svg,
    h5 .anchor:focus svg,
    h6 .anchor:focus svg {
      visibility: visible;
    }
  </style><script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var hash = window.decodeURI(location.hash.replace('#', ''))
      if (hash !== '') {
        var element = document.getElementById(hash)
        if (element) {
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          var clientTop = document.documentElement.clientTop || document.body.clientTop || 0
          var offset = element.getBoundingClientRect().top + scrollTop - clientTop
          // Wait for the browser to finish rendering before scrolling.
          setTimeout((function() {
            window.scrollTo(0, offset - 0)
          }), 0)
        }
      }
    })
  </script><link rel="preconnect" href="https://instagram.com"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script>
        window.gatsbyLoadInstagram = function() {
          var js = document.createElement('script');
          var firstScript = document.getElementsByTagName('script')[0];
          js.id = 'gatsby-plugin-instagram';
          js.src = 'https://instagram.com/embed.js';

          firstScript.parentNode.insertBefore(js, firstScript);

          return true;
        }
      </script><script src="/commons.js"></script>
</body></html>

So it seems like the netlify dev command does not respect function redirects.

If the current behavior is a bug, please provide the steps to reproduce.

First get the project up and running.

git clone https://github.com/bradgarropy/dailytexascountry.com.git
cd dailytexascountry.com
npm install
netlify dev

Then go to the /store page and enter your email, which will kick off the API call to /api/subscribe. Check the Network tab to see the unexpected HTML response.

What is the expected behavior?

The /api/subscribe endpoint should return a JSON object.

Local Environment Information

────────────────────┐
 Environment Info   │
────────────────────┘

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Binaries:
    Node: 12.13.1 - D:\nodejs\node.EXE
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.5 - D:\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0

netlify-cli/2.50.0 win32-x64 node-v12.13.1

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 18 (7 by maintainers)

Most upvoted comments

Thanks @michaelGregoire for reporting.

While the original issue is about redirecting to functions, I was able to reproduce your issue here: https://github.com/erezrokah/netlify-build-reproductions/tree/cli/issue_890#netlify-build-reproductions

I’ll follow up with an update once I have more information.

erezrokah on Aug 11, 2020

Thank you all for you patience. netlify-cli@2.51.0 has just been released which contains a fix for this issue.

RaeesBhatti on May 12, 2020

I can confirm this issue on netlify-cli@2.50.0. I’ve tested https://github.com/netlify/cli/pull/885 and it can’t be reproduced on that branch. Thank you for providing the example. Please hold on until that PR is merged and released.

RaeesBhatti on May 10, 2020