Send apiKey on a html form post or alternative

Question

I'm doing a ASP.NET mvc5 project. In one of the pages, I have a button that I want to use to do a post to a cross domain api.

I've tried doing the post like this with 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": "*"
        }

    });

but from what I read I can't do a cross domain request with JavaScript, so I tried with a form:

<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>

also, this is the server CORS config https://gist.github.com/michiel/1064640

My problem is that I need to send a header with a apiKey, is that possible in a form? If not, what other options are there that allow me to do a cross domain post when I press a button on my asp.net MVC5 page?

Thanks

@Amit, it will not work if `endpoint` requires header to be present. — Kristian Vitozev, Sep 08 '15 at 10:59

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

You can do cross-domain XMLHttpRequest using CORS if your endpoint support it.

These headers are response headers and they are returned from server if CORS is enabled. You should not send them to server.

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

So, just make sure that your server returns Access-Control-Allow-Origin header.

You should only send your custom header (with API key) that way (you're on right way):

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

edited May 23 '17 at 11:52

Community

1
1

answered Sep 08 '15 at 10:50

Kristian Vitozev

5,791
6
36
56

yes, i edited my post with the more updated ajax that i used, first one was a older version. The request reaches the server as "Options" instead of post, and in their config they have this: https://gist.github.com/michiel/1064640 , hence im getting a HTTP/1.1 204 No Content response – Thought Sep 08 '15 at 11:01
Remove `Access-Control-Allow-Headers` and `Access-Control-Allow-Origin` in your request and make sure that these headers are returned from your endpoint. – Kristian Vitozev Sep 08 '15 at 11:02
Are you sure that request is handled as `OPTIONS` request? Check your browser's Network tab to see activity for XHR requests. – Kristian Vitozev Sep 08 '15 at 11:08
if i dont use the Access-Control-Allow-Origin and Access-Control-Allow-Headers headers i get POST https://.../bench/book 500 (Internal Server Error) and this is what appears in browser network http://paste2.org/0ZIY5OIM – Thought Sep 08 '15 at 11:41

Send apiKey on a html form post or alternative

1 Answers1