javascript - 通过 html 表单帖子或其他方式发送 apiKey

Question

我正在做一个 ASP.NET mvc5 项目。 在其中一个页面中，我有一个按钮，我想用它来向跨域 api 发送帖子。

我尝试过使用 ajax 来完成这样的帖子:

      $.ajax({
        type: "POST",
        url: URLX,
        data: myJSObject,

        success: function (data) {
            console.log("test123");
        },
        "async": true,
        "crossDomain": true,
        headers: {
            "Content-Type": "application/json",
            //"Authorization": "Bearer XX+n06LhXHb/cAZyBSvXZAd1LlkO8NqtORuHGyexWr4=",
            "apiKey": "MEV8yv3hxxxxxxxxxxxxxxxFdKWJer4H3LmL6ntcL",
            "Access-Control-Allow-Headers": "*",
            "Access-Control-Allow-Origin": "*"
        }

    });

但是从我读到的内容来看，我无法使用 JavaScript 进行跨域请求，所以我尝试使用表单:

<div class="hiddenform">
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
<form action="http//something.com/otherthing" id="login_form" method="post" target="hiddenFrame">
    <div class="form_section">You can login here</div>
    <div class="form_section">
        <input xmlns="http://www.w3.org/1999/xhtml" class="text" id="userIdform"
               name="session[sec1]" tabindex="1" type="text" value="" />
    </div>
    <div class="form_section">
        <input xmlns="http://www.w3.org/1999/xhtml" class="text" id="periodform"
               name="session[sec2]" tabindex="1" type="text" value="" />
    </div>
    <div class="form_section">
        <input xmlns="http://www.w3.org/1999/xhtml" class="text" id="benchform"
               name="session[sec3]" tabindex="1" type="text" value="" />
    </div>
    <div class="form_section">etc</div>
    <div xmlns="http://www.w3.org/1999/xhtml" class="buttons">
        <button type="submit" class="" name="" id="goform" tabindex="3">Go</button>

    </div>
</form>

此外，这是服务器 CORS 配置 https://gist.github.com/michiel/1064640

我的问题是我需要发送带有 apiKey 的 header ，这可以在表单中吗？如果没有，还有什么其他选项可以让我在按下 ASP.NET MVC5 页面上的按钮时进行跨域发布？

谢谢

Answer 1

您可以使用跨域XMLHttpRequest CORS如果您的端点支持。

这些 header 是响应 header ，如果启用了 CORS，它们将从服务器返回。您不应该将它们发送到服务器。

    "Access-Control-Allow-Headers": "X-Requested-With",
    "Access-Control-Allow-Origin" : "*"

因此，只需确保您的服务器返回 Access-Control-Allow-Origin header 即可。

您应该仅以这种方式发送自定义 header (带有 API key )(您的方向是正确的):

$.ajax({
    ...
    headers: { 'APIKeyPost': 'MEVxxxxxxxxxxxxxx4H3LmL6ntcL' }
    ...
});