javascript - 没有预检的跨域发布json

Question

我正在尝试将一些 json 发布到共享点 url，如 this例子。该示例使用节点，但我尝试在浏览器中执行此操作。

我用 fetch 试过了第一的:

fetch("https://outlook.office365.com/webhook/...", 
            {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;'
            },
            body: JSON.stringify(this.groupCardBody()),
        })

从那我得到了错误:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1234' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但我无法控制响应，如果我添加 mode: 'no-cors'按照它的建议进入提取选项，它会去除 content-type header 和返回 415 Unsupported Media Type .

所以我用一个简单的 xhttp 请求尝试了它，但它也失败了，因为它做了预检并且没有得到正确的 header :

    let xhr = new XMLHttpRequest()
    xhr.open("POST", "https://outlook.office365.com/webhook/...");
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify(this.groupCardBody()));

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

request示例中使用的库很难在浏览器中工作，而且绝不是轻量级的(在我的 webpacked 脚本中增加了近 2MB)，所以欢迎提出有关如何解决这个问题的任何建议我很卡，我所有的搜索都出现了修复服务器的答案，我没有那个选项。

更新

正如接受的答案中所建议的那样，我通过将 json 发布回服务器并从那里发布帖子来解决它，让它使用如下简单的方法工作:

客户:

fetch("PostGroupCard?json="+
    encodeURI(JSON.stringify(this.groupCardBody())),
    {credentials: "same-origin"}
)

服务器:

Function PostGroupCard(json As String)
    Dim wr = WebRequest.Create("https://outlook.office365.com/webhook/...")
    wr.ContentType = "application/json"
    wr.Method = "POST"

    Using sw = New StreamWriter(wr.GetRequestStream())
        sw.Write(json)
        sw.Flush()
        sw.Close()
    End Using

    Dim r = wr.GetResponse()
    Using sr = New StreamReader(r.GetResponseStream())
        Dim result = sr.ReadToEnd()
    End Using

End Sub

Answer 1

这个答案大部分来自评论。

出于安全原因，除非您在同一来源或来自其他域的 CORS header 说可以，否则您不能发出 XMLHTTPRequest。如果这是可能的，任何站点都可以执行恶意操作，例如破解您的帐户。

要考虑的两种替代方案是 JSONP 和让您的服务器充当访问另一个域的代理。