自定义配置导致的奇怪 CORS 问题

Question

我正在为 JavaScript 中的 fetch 方法编写一个小包装器（我非常了解像 Axios 这样的库可以做同样的事情）。我的想法来自a blog post

我的代码是这样的

async function apiCall(
  endpoint,
  { data, headers: customHeaders, ...customConfig } = {}
) {
  console.log("endpoint", endpoint);
  const config = {
    method: data ? "POST" : "GET",
    body: data ? JSON.stringify(data) : undefined,
    headers: {
      "content-type": data ? "application/json" : undefined,
      ...customHeaders
    },
    ...customConfig
  };

  return window.fetch(endpoint, config).then(async (response) => {
    if (response.ok) {
      return response.json();
    } else {
      // By default, window.fetch will only reject a promise if the actual request itself failed (network error), not if it returned a "Client error response".
      const error = await response
        .json()
        .catch(() => new Error("invalid json"));
      return Promise.reject(error);
    }
  });
}

export function requestMovies(query) {
  const endpoint = `${apiULR}?apikey=${API_KEY}&s=${encodeURIComponent(query)}`;

  return apiCall(endpoint);
}

但是，我遇到了TypeError Failed to fetch，我认为这是由 CORS 引起的。

如果我从window.fetch 中取出config，如

async function apiCall(
  endpoint,
  { data, headers: customHeaders, ...customConfig } = {}
) {
  return window.fetch(endpoint).then(async (response) => {
    if (response.ok) {
      return response.json();
    } else {
      // By default, window.fetch will only reject a promise if the actual request itself failed (network error), not if it returned a "Client error response".
      const error = await response
        .json()
        .catch(() => new Error("invalid json"));
      return Promise.reject(error);
    }
  });
}

问题就解决了。不确定究竟是哪一部分触发了这个 CORS 问题...

这是一个现场演示：https://codesandbox.io/s/charming-saha-4c2bh?file=/src/index.js

Answer 1

按照data未给出路径：

1. 三元进入false case
2. headers 得到一个条目 content-type: undefined
3. 请求添加了此标头
4. 请求被 api 拒绝，因为它包含一个内容类型的标头（可能带有字符串'undefined'）

解决方案：此处不要使用三元组，将其替换为if，以摆脱undefined 条目。 另外：阅读 javascript 对象中 null、未定义值和“拥有自己的属性”之间的差异