如何在发送凭据时为跨源请求设置内容类型？答案

【问题标题】：How to set content-type for cross origin requests while sending credentials?如何在发送凭据时为跨源请求设置内容类型？
【发布时间】：2018-07-19 09:21:13
【问题描述】：

在您的调试工具中，尽管请求了不同的 Content-Type，但此请求将与 text/plain;charset=UTF-8 一起发送。至少，发送凭据。

variable=window.atob('/P//SCnp6VL///9BidpJicBMietMi3QkUEiLrCSwAAAATIu8JMgAAABMi2wkWOnL9///SItFEEiLfCQ4SIkHSItFGEiJRwjpJfv///YFbLUhAAgPhTH8//9IjQ2uegEASI01dksBAEiNPRBpAQC6IAEAAOh29AAAZg8fRAAARItUJEhMi0QkWEiLXCRQSIusJLAAAADpc/f//0SLVCRISItcJFBIi6wksAAAAEWF0g+UwOmN9f//SIt8JCj/FQTNIQBIjTVTRwEAvwIAAAAxwOjJYQAAv38AAADoHwwBAA8fRAAAZi4PH4QAAAAAAEFXQVZJifZBVUFUSYnUVVNNicVIgeyYAAAAD7Y=');

document.getElementById("fetchIt").addEventListener("click", function(){
        fetch("https://stackoverflow.com/q/48691699/2284570",{
        credentials: 'include',
        mode:'no-cors',
        headers: new Headers({'Content-Type': 'application/x-receive-pack-result'}), method: 'POST', body: variable}) // Request something that may or may not redirect
            .then(function (response) {
                console.log(response);
              }
            );
    });

&lt;input type="button" id="fetchIt" value="Press the button to launch the request"&gt;

我错过了什么？

【问题讨论】：

但是html中的fetchit元素在哪里
@Dipakchavda：已修复。

标签： javascript post fetch-api

【解决方案1】：

您已设置 mode:'no-cors'，但对于表单元素的 enctype attribute 无效值的 Content-Types 需要获得对 CORS preflight request 的响应的许可。

您还需要通过 CORS 获得许可才能阅读响应。

不要设置mode:'no-cors'。

【讨论】：

但是如何将请求跨域发送到我不拥有的 Web 服务器？我目前看到的是请求已发送，但标头错误。 fetch.spec.whatwg.org/#concept-http-fetch 中描述的当前行为在哪里？
"但是如何将请求跨域发送到我不拥有的 Web 服务器？" — 如果他们不允许您从用户的浏览器执行此操作，则您不能这样做。这才是重点。而是从您的服务器发出请求。
“我目前看到的是请求已发送，但标头错误。” - 是的。您设置了 no-cors 模式，因此它会发出请求并忽略您所做的任何需要通过 CORS 获得许可的操作。更改内容类型？忽略。阅读回复？忽略。
您在the spec 中描述的行为在哪里？在其他情况下，这将触发一个不会发送任何内容的错误。
fetch.spec.whatwg.org/#concept-request-mode — "no-cors"：将请求限制为使用 CORS 安全列表中的方法和 CORS 安全列表中的请求标头。成功后，fetch 将返回一个不透明的过滤响应。