Postman the request is work, but in my nextJS app i get a 403 Forbidden, why?

Questions and Answers
1
System Information
  • Strapi Version: 5.0.6
  • Operating System: macOS
  • Database: mysql
  • Node Version: v16.15.1
  • NPM Version: 8.11.0
  • Yarn Version:

in my postman ,the request is correct, i can get the response, but in my code (i use nextJS,and send request in react server compoment ), i get an error 403 Forbidden

i have set cors like this
middleswares.ts

export default [
  'strapi::logger',
  'strapi::errors',
  'strapi::security',
  // 'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000', 'https://subdomain.example.com', 'https://someotherwebsite.org'],
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
      headers: ['Content-Type', 'Authorization', 'Origin', 'Accept'],
      keepHeaderOnError: true,
    },
  },
];

and i have set role like this

image
image3220×1378 265 KB

and i also set the API Token Token type Full access

my nextJS code like this:

async function postData() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  const accessToken = process.env.API_ACCESS_TOKEN;
  console.log("API URL:", apiUrl + "/notes", accessToken);
  console.log("Access Token:", accessToken ? "Set" : "Not set");

  try {
    // 设置请求头并发送请求
    const response = await fetch(apiUrl + "/notes", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        data: {
          title: "!!测试POST!1333!",
          content: "插入@@内,容2233",
        },
      }),
    });

    if (!response.ok) {
      const errorData = await response.json();
      console.error("Error response:", errorData);
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log("Successful response:", data);
    return data;
  } catch (error) {
    console.error("Error in postData:", error.message);
    return { error: error.message };
  }
}

it print the request and access-token like correct

API URL: http://localhost:1337/api/notes bearer 0ea87d2xxx
Access Token: Set
Error response: {
  data: null,
  error: {
    status: 403,
    name: 'ForbiddenError',
    message: 'Forbidden',
    details: {}
  }
}
Error in postData: HTTP error! status: 403
post { error: 'HTTP error! status: 403' }

I want to use API tokens to post request , how to solve the problem?