由于将函数移动到单独的JS类而导致的CORS错误

Question

我有一个发送API错误报告的按钮，但是我最近将它从Main.js移到它自己的类中，并且每当我尝试使用它时，我突然收到CORS错误。我已经做了一些研究，但我不能理解为什么这将被触发简单地通过移动到自己的类函数，寻找指导，为什么这种行为可能发生，以及如何避免它。

错误:

Uncaught (in promise) TypeError: response.json is not a function
Access to fetch at 'exampleUrl' from origin 'http://localhost:4567' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

Uncaught (in promise) TypeError: Failed to fetch
$("#bugForm").submit((e) => {
e.preventDefault()
const input = document.getElementById('nameInput');
// logic here
const bugInfo = {
info: "Hello"
}
Logger.logInfo(bugInfo).then(console.log('print'))
})
});

Logger.js

class Logger {
constructor(settings) {
// getting the settings here and assigning it to the constructor variable
this.settings = settings;
}
static async logInfo(data = {}) {
console.log('Hello!')
const url = 'https://www.pivotaltracker.com/services/v5/projects/2530461/stories'
const response = fetch(url, {
method: 'POST',
headers: {
"Token": `${metadata.settings.token}}`,
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
return response.json();
}
}
const metadata = {
settings: "Hello"
}
const logger = new Logger(metadata.settings);

进入新类之前的代码:

async function reportBug(data = {}) {
const url = 'urlexample'
const response = await fetch(url, {
method: 'POST',
headers: {
"X-TrackerToken": `${metadata.settings.token}`,
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
return response.json();
}
enter code here

Answer 1

不，这很可能与将函数移动到另一个类无关。

但是首先，你用错了fetch

const response = fetch(url, { ...});

返回一个承诺。你必须等到它分解或排斥，直到你可以尝试进入它的身体。例如，你不能只做

return response.json()

，因为Promise没有方法json()(正如第一个错误告诉您的那样)。你必须用.then(...).catch(...)或await。例如

return fetch(...)
.then(response => {
if (response.ok) //check if httpstatus is 2xx
return response.json();
throw new Error(`status ${response.status`);
} 

但要注意，这也将返回一个承诺(因为response.json()再次异步并返回一个承诺)，你必须等待。并且(在某些时候)你必须.catch()拒绝承诺的错误(这是第三个错误告诉你的，你的fetch遇到了一些你没有捕捉到的错误)抓住数以千计的关于异步编程的教程之一，并重新编写你的代码。

第二个错误告诉您，来自该服务器的答案缺少Access-Control-Allowed-Headers头的特定头定义。(这很可能导致fetch失败)。如果你发送一个Token报头到服务器，这是服务器不允许的。所以，如果你在移动代码之前说它工作了，你可能之前没有那个标题，在移动代码后不久添加了它。虽然我不是很确定，不正确的异步编程是如何工作的…