Svelte中Fetch请求失败但curl/Postman正常，应设置哪些请求头？

错误点整理 #

• 请求体参数名错误：Fetch API 提交请求体的配置字段是body，代码里误写为data，参数不识别导致请求没有携带提交的表单数据。
• 跨域模式配置错误：mode: 'no-cors'会让请求返回不透明响应，既无法读取返回内容，也无法判断请求是否成功，本地调试只要后端接口配置了CORS跨域许可，直接删除这个配置即可。
• 回调函数写法错误：第一个.then(console.log("test"))是立即执行打印逻辑，不会等待请求返回，需要改成箭头函数包裹() => console.log("test")。
• 端口配置错误：curl示例里接口地址是8000端口，代码里写的是8080，端口不一致会直接导致请求失败。
• 额外优化点：Content-Type可以不用手动设置，传URLSearchParams作为body的时候浏览器会自动带上正确的application/x-www-form-urlencoded请求头。

修正后代码 #

function handleClick() {
    // 修正端口为8000和curl请求保持一致
    const url = "http://127.0.0.1:8000/parse"
    fetch(url, {
        method: "POST",
        // 请求体配置字段改为body，删除错误的no-cors配置
        body: new URLSearchParams({
            locale: "en_GB",
            text: "Monday"
        })
    })
    // 用箭头函数包裹打印逻辑，等待请求返回后再执行
    .then(() => console.log("test"))
    .then((response) => {
        console.log(response);
        return response.json();
    })
    .then((data) => {
        console.log("data", data);
    })
    .catch((error) => {
        console.log(error)
    });
}

如果修改后还是报跨域错误，需要在8000端口的后端服务配置CORS响应头，允许前端访问地址即可。

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