NextJS 13搭配WPGraphQL请求遭CORS策略拦截问题求助

使用NextJS 13结合WPGraphQL获取数据时，遭遇CORS策略拦截。已安装WPGraphQL CORS插件，且在SWR的fetcher中配置了请求头。不带(where: {search: $searchVariable})条件时能正常获取文章、页面数据，添加该搜索条件后立即触发CORS拦截。

搜索功能组件代码 #

"use client";
import { searchQuery } from "../../queries/search";
import useSWR from 'swr';
const API = 'http://localhost:8020/graphql'
import { useState } from 'react';

const fetcher = (query, searchTerm) => {
  return fetch(API, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
      'Access-Control-Allow-Headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
    },
    body: JSON.stringify({ query, variables: { search: searchTerm } })
  })
    .then(res => res.json())
    .then(res => res.data)
}

export default function Search() {
  const [searchTerm, setSearchTerm] = useState("");
  const [shouldFetch, setShouldFetch] = useState(false);

  const handleSearchFieldChange = (e) => {
    e.preventDefault();
    setSearchTerm(e.target.value);
    console.log('search term changed')
    console.log(searchTerm);
    setShouldFetch(false);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setShouldFetch(true);
  }

  const { data, error } = useSWR(shouldFetch ? [searchQuery, searchTerm] : null, fetcher);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          name="search_term" 
          value={searchTerm} 
          type="text" 
          onChange={handleSearchFieldChange}
          />
        <button>Search</button>
      </form>
    </div>
  )
}

导入的searchQuery代码 #

export const searchQuery = `
  query Search($searchVariable: String!) {
    posts(where: {search: $searchVariable}) {
      nodes {
        title
        content
        slug
        uri
        databaseId
      }
    }
  }
`

WPGraphQL CORS插件设置 #

有没有开发者遇到过同类情况？

内容的提问来源于stack exchange，提问作者R. Leeson