405 Error when form submit POST

[PurplePineapple123]

I'm trying to submit a form but get a 405 error when trying to POST to my api route. I've tried using both axios and the fetch api.

What do you think should happen?

Expect this object to be returned: { name: 'Success' } - Successful POST request

What actually happens?

405 Error: https://snipboard.io/u8PKS6.jpg

Steps to reproduce the problem

Scaffold with Shopify CLI. Create an api endpoint and a page to call that endpoint from.

/survey/create

const handleSubmit = async (event) => {
    event.preventDefault();

    const testData = {
      title: surveyTitle,
    };

    const res = await fetch("/api/survey", {
      method: "POST",
      body: JSON.stringify({
        dataName: testData,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });
  };

/api/survey

export default function handler(req, res) {
  console.log(req.body);
  res.status(200).json(JSON.stringify({ name: 'Success' }))
}

Specifications

• Browser: Chrome 96
• Device: MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
• Operating System: MacOS Catalina

[FelixBehr]

I have the same problem and are looking for a solution :-(

[FelixBehr]

simple fix allthough you need to handle security yourself than.

add

  router.all("/api/(.*)", handleRequest); // api is clear as well

before

  router.get("/_next/webpack-hmr", handleRequest); // Webpack content is clear
  router.get("(.*)", async (ctx) => {

in server/server.js such that the result looks like this

  router.all("/api/(.*)", handleRequest); // api is clear as well
  router.get("/_next/webpack-hmr", handleRequest); // Webpack content is clear
  router.get("(.*)", async (ctx) => {

[Michael-Gibbons]

A bit late, but I'm answering this question to help others.

I believe you're getting that error because you need to add in the JWT to the request, you're getting a 405 method not allowed because it is literally not allowed. You can use the authenticatedFetch helper from app-bridge-utils and replace fetch with that. Although I've had issues with it, so I made this helper function.

//in _app.js
function MyProvider(props) {
  const app = useAppBridge();
  if (typeof window !== "undefined") {
    window.app = app; // saving instance of app in window variable
  ...

// in a utils file
import { getSessionToken } from "@shopify/app-bridge-utils";

const authFetch = async (url, options = {}) => {
  const newToken = await getSessionToken(window.app);
  const updateOptions = (newOptions) => {
    const update = { ...newOptions };
    update.headers = {
      ...update.headers,
      Authorization: `Bearer ${newToken}`,
    };
    return update;
  };
  return fetch(url, updateOptions(options));
};

// usage is like normal fetch
    const response = await authFetch("/api/v1/your-route", {
      method: "POST",
      headers: {
        Accept: "application/json",
        ... other headers
      },
      body: JSON.stringify(yourStuff),
    }).then((res) => res.json());

What this function does is append a token header to all of your requests basically saying "yeah I'm from the app let me make my requests to the backend from here thanks".

Hope that helps.