Configure for HTTP Methods | Edge Functions on Netlify

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>Configure for HTTP Methods | Edge Functions on Netlify</title> <meta name="description" content="Configure Edge Functions to execute for certain HTTP methods." />  <link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" crossorigin/>  <link rel="stylesheet" href="https://example-styles.netlify.app/styles.css">  <meta name="theme-color" content="#ffffff" /> <link rel="icon" href="/favicon.svg" /> <link rel="mask-icon" href="/mask-icon.svg" color="#000000" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="manifest" href="/manifest.json" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@netlify" /> <meta name="twitter:creator" content="@netlify" /> <meta property="og:url" content="https://edge-functions-examples.netlify.app/example/method" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Configure for HTTP Methods" /> <meta property="og:description" content="Configure Edge Functions to execute for certain HTTP methods." /> <meta property="og:locale" content="en_US" /> <meta property="og:image" content="https://res.cloudinary.com/netlify/image/upload/c_fit,g_west,h_400,co_rgb:FFFFFFFF,l_text:netlify.com:Pacaembu-Bold.ttf_57:Netlify%20Edge%20Functions:%0AConfigure%20for%20HTTP%20Methods,w_1053,x_46/v1619123320/netlify.com/default-og-background-learn-more.png" /> <meta property="og:image:alt" content="A Netlify branded open graph image representing Configure for HTTP Methods" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:site_name" content="Edge Functions on Netlify" /> <script src="/lib/highlight.min.js"></script> <script>hljs.highlightAll();</script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-X2FMMZSSS9'); </script> </head> <body> <header> <nav> <a href="https://www.netlify.com/"> <img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" alt="Netlify" class="nf-logo"> </a> <ul> <ul><li>Configure for HTTP Methods</li></ul> <ul><a href="/">Edge Functions Examples</a></li> </ul> </nav> <section> <h1>Edge Functions on Netlify</h1> <p>Reference examples for learning about Edge Functions on Netlify.</p> </section> </header> <hr> <main> <section> <section> <h1>Configure for specific HTTP methods</h1> <p> With in-source configuration, you can restrict Edge Functions to respond to certain HTTP methods. </p> <p> In this example, we set up an Edge Function to execute for a <code>PUT</code> or <code>POST</code> request. </p> <pre><code>import type { Config, Context } from "@netlify/edge-functions"; export default async (request: Request, context: Context) => { return new Response(`This is a response to a ${request.method}`) }; export const config: Config = { method: ["POST", "PUT"] }</code></pre> <h2>See this in action</h2> <p>Since the Edge Function is configured to respond to <code>PUT</code> and <code>POST</code>, accessing the Edge Function through a browser will result in a 404. </p> <p>To validate that the Edge Function works, you can use cURL in your terminal:</p> <pre><code> curl -X POST https://edge-functions-examples.netlify.app/example/method curl -X PUT https://edge-functions-examples.netlify.app/example/method </code></pre> <ul> <li>The Edge Function code: <a href="https://github.com/netlify/examples/tree/main/examples/edge-functions/netlify/edge-functions/method.ts" target="_BLANK" rel="noopener">method.ts</a></li> </ul> </section> <p> <a href="/" class="btn-primary">Explore more examples</a> </p> </section> <hr> <section> <h2>What are Edge Functions?</h2> <p>Using JavaScript and TypeScript, <a href="https://www.netlify.com/products/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Product%20Page#netlify-edge-functions" target="_blank" rel="noopener">Netlify Edge Functions</a> give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more! <p> This all happens at the <strong>Edge</strong> — directly from the worldwide location closest to each user.</p> </p> <blockquote> <p>To use Edge Functions on Netlify, add JavaScript or TypeScript files to a <code>/netlify/edge-functions</code> directory in your project.</p> <p><a href="https://docs.netlify.com/edge-functions/overview/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Docs" target="_blank" rel="noopener">Learn more in the docs</a>.</p> </blockquote> </section> <hr/> <section> <h3>Deploy this site to Netlify</h3> <p> Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account. </p> <p> <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a> </p> </section> </main> <footer> <div class="flex-btwn"> <a href="https://www.netlify.com/"><img src="https://example-styles.netlify.app//images/logo-netlify-small-monochrome-lightmode.svg" class="nf-logo" alt="Netlify logo"></a> <div class="social-icons"> <a href="https://youtube.com/Netlify"><img src="https://example-styles.netlify.app/icons/youtube.svg" alt="YouTube"></a> <a href="https://github.com/netlify/examples"><img src="https://example-styles.netlify.app/icons/github.svg" alt="GitHub"></a> <a href="https://x.com/Netlify"><img src="https://example-styles.netlify.app/icons/twitter.svg" alt="X"></a> <a href="https://linkedin.com/company/Netlify"><img src="https://example-styles.netlify.app/icons/linkedin.svg" alt="LinkedIn"></a> <a href="https://answers.netlify.com"><img src="https://example-styles.netlify.app/icons/discourse.svg" alt="Netlify Answers"></a> </div> </div> <div class="links-container"> <section> <h3>Developers</h3> <ul role="list"> <li><a href="https://developers.netlify.com/">Netlify Developers</a></li> <li><a href="https://developers.netlify.com/sdk/">Netlify SDK</a></li> <li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li> <li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li> <li><a href="https://docs.netlify.com">Documentation</a></li> <li><a href="https://netlify.com/conference/">Compose Conference</a></li> </ul> </section> <section> <h3>Company</h3> <ul role="list"> <li><a href="https://netlify.com/blog/">Blog</a></li> <li><a href="https://netlify.com/about/">About</a></li> <li><a href="https://netlify.com/careers/">Careers</a></li> <li><a href="https://netlify.com/press/">Press</a></li> <li><a href="https://swag.netlify.com/">Netlify Store</a></li> <li><a href="https://netlify.com/sustainability/">Sustainability</a></li> </ul> </section> <section> <h3>Contact Us</h3> <ul role="list"> <li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li> <li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li> <li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li> <li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li> <li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li> </ul> </section> </div> <small> <ul> <li><a href="https://netlify.com/trust-center/">Trust Center</a></li> <li><a href="https://netlify.com/privacy/">Privacy</a></li> <li><a href="https://netlify.com/security/">Security</a></li> <li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li> <li><a href="mailto:fraud@netlify.com?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li> </ul> <div>© 2024 Netlify</div> </small> </footer> </body> </html>

CINXE.COM

Configure for HTTP Methods | Edge Functions on Netlify