Next.js搭配WPGraphQL调用useQuery出现CORS跨域问题如何解决？

首先你当前的配置存在2个核心错误：

• Access-Control-Allow-Origin、Access-Control-Allow-Credentials属于服务端响应头，放在客户端请求头中完全无效，反而会触发额外的预检请求校验
• fetchOptions中设置的mode: 'no-cors'不支持携带Authorization这类自定义请求头，也会导致浏览器限制读取响应内容，是触发客户端请求失败的直接原因
  另外getStaticProps/getServerSideProps是在Next.js服务端发起的请求，不受浏览器同源策略限制，所以无论配置是否正确都能正常拉取数据，只有浏览器端执行的useQuery请求会触发CORS校验。

第一步：修正Apollo Client配置 #

删除无效配置项，保留必要参数即可：

const httpLink = createHttpLink({
  uri: process.env.NEXT_PUBLIC_WP_API_URL,
  headers: {
    'Authorization': process.env.NEXT_PUBLIC_WP_AUTHORIZATION,
    'Content-Type': 'application/json',
  },
  credentials: 'include'
})
const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
});

第二步：配置WordPress侧CORS规则 #

需要在WordPress服务端添加跨域头配置，推荐将以下代码加入当前WordPress主题的functions.php文件中：

add_action('graphql_process_http_request_response', function($response, $result, $operation, $request_params) {
    // 生产环境请替换为你的正式前端域名
    $allowed_origin = 'http://localhost:3000';
    if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] === $allowed_origin) {
        header("Access-Control-Allow-Origin: {$allowed_origin}");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Methods: POST, OPTIONS");
        header("Access-Control-Allow-Headers: Content-Type, Authorization");
    }
    // 处理预检OPTIONS请求
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        status_header(200);
        exit();
    }
    return $response;
}, 10, 4);

如果使用Apache/Nginx做Web服务，也可以直接在服务器配置中添加上述CORS头规则，效果一致。

内容的提问来源于stack exchange，提问作者benjdan