如何阻止form.submit（）将我重定向到另一个页面？

Question

I'm building a Web App and I am required to make some form of Cross-Domain POST request to a server which I don't personally have access to.

I've tried many things to make it work with Ajax but I found no success. I did a bit of research and eventually I eventually found a solution which was to create an invisible iframe with a form, then submit the said form to get back the information I require.

However, this form is created in javascript, so I use the form.submit() method to submit the said form, and this, rather than simply giving me the JSON file with the information I require, redirects me to the actual JSON file in a different page altogether.

How can I prevent this from happening?

    var ifr = document.createElement('iframe');
    var frm = document.createElement('form');
    frm.setAttribute("id", "invis_form");
    frm.setAttribute("action", endpoint);
    frm.setAttribute("method", "post");

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("name", "chave");
    x.setAttribute("value", apikey);

    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("name", "valor");
    y.setAttribute("value", "125");

    frm.appendChild(x);
    frm.appendChild(y);

    ifr.appendChild(frm);
    document.body.appendChild(ifr);
    frm.submit();

I was expecting to get something I could print on the console, not to be redirected to a JSON file with the information I need.

Answer 1

The act of submitting a form triggers browser navigation to the response returned from the HTTP request.

The only way to stop it replacing the current page is to make the navigation happen elsewhere (eg in a frame or new window) with target … but then cross-origin security would prevent you from reading the data with JavaScript.

---

You can't use a form to read data from a remote site for the same reasons you can't use Ajax to do it .

The browser is designed to stop your JavaScript from reading data that someone else's website is willing to share with the owner of the browser .

If the data is public (ie doesn't need the user to log in, be on the same LAN, or anything similar) then use server-side technology to read it (you can proxy it to the browser).

Answer 2

Figured out you can add https://cors-anywhere.herokuapp.com/ to your endpoint and it will just work, even with Ajax requests.

Example

var apikey = "my-api-key";
var cors = "https://cors-anywhere.herokuapp.com/";
var endpoint = "https://test/example";
$.ajax({
        type: "POST",
        url: cors + endpoint + "/create",
        crossDomain: true,
        dataType: 'json',
        data: {
            'chave': apikey,
            'valor': 125.00
        },

        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },

    });

How or why this works? I have no clue.