Axios CORS 尝试使用 React 查询从端点访问数据时出错？

Question

在我的 NextJS 应用程序中，下面的 React Query POST 请求正在尝试访问数据，

import { useMutation } from '@tanstack/react-query'
import axios from 'axios'
import { DCMSRequestData, DCMSResponse } from '@/types/DCMSdata'

export default function useDCMSdata() {
  return useMutation<DCMSResponse, Error, DCMSRequestData>({
    mutationFn: async (requestData: DCMSRequestData) => {
      return axios
        .post(
          'https://supply-chain-wms-api-public-develop-internal-eks.eu-west-1.dev.hbi.systems/api/v1/order/query',
          requestData,
          {
            headers: {
              'Content-Type': 'application/json',
              'x-hbi-app-name': 'local-testing',
              Connection: 'keep-alive',
            },
            withCredentials: true,
          },
        )
        .then((response) => response.data)
    },
  })
}

这里我尝试在 useEffect 中调用 mutate 函数，

useEffect(() => {
    const requestData: DCMSRequestData = {
      warehouse_ids: ['TestTransfer'],
      // statuses: ['string'],
      // orderTypes: ['string'],
      // transferIds: [0],
      page_size: 100,
      page: 1,
    }

    mutate(requestData, {
      onSuccess: (responseData) => {
        const fetchedOrders = responseData.data.data.map((order) => ({
          id: order.id,
          warehouseId: order.warehouse_id,
          status: order.status,
          transferId: order.transfer_id,
          selected: selectedIds.includes(order.id),
        }))
        setRows(fetchedOrders)
      },
      onError: (error) => {
        console.error('Error fetching data:', error)
      },
    })
  }, [mutate, selectedIds])

我认为我的语法在某个地方是错误的，我查看了 Tanstack 文档，但无法找到这个问题。

这是我的错误

Answer 1

CORS 错误与前端无关。您正在尝试从第三方服务器获取数据。在这种情况下，第三方服务器由于其 CORS 策略而默认阻止您的网站域，这就是您收到 CORS 错误的原因。要获取没有 CORS 错误的数据，您需要在第三方服务器上允许您的网站域。您可以在here看到类似的问题。