Javascript 如何阻止form.submit()将我重定向到其他页面?

Javascript 如何阻止form.submit()将我重定向到其他页面?,javascript,html,Javascript,Html,我正在构建一个Web应用程序,我需要向我个人无权访问的服务器发出某种形式的跨域POST请求 我已经尝试了很多方法让它与Ajax一起工作,但是我没有发现成功。我做了一些研究,最终我找到了一个解决方案,就是用一个表单创建一个不可见的iframe,然后提交所述表单以获取我需要的信息 但是,这个表单是用javascript创建的,所以我使用form.submit()方法来提交所述表单,而这并不是简单地给我JSON文件和我需要的信息,而是将我重定向到另一个页面中的实际JSON文件 我怎样才能防止这种情况发

我正在构建一个Web应用程序,我需要向我个人无权访问的服务器发出某种形式的跨域POST请求

我已经尝试了很多方法让它与Ajax一起工作,但是我没有发现成功。我做了一些研究,最终我找到了一个解决方案,就是用一个表单创建一个不可见的iframe,然后提交所述表单以获取我需要的信息

但是,这个表单是用javascript创建的,所以我使用form.submit()方法来提交所述表单,而这并不是简单地给我JSON文件和我需要的信息,而是将我重定向到另一个页面中的实际JSON文件

我怎样才能防止这种情况发生

    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();

我希望得到可以在控制台上打印的东西,而不是重定向到包含所需信息的JSON文件。

提交表单的行为会触发浏览器导航到HTTP请求返回的响应

阻止它替换当前页面的唯一方法是使用
target
…使导航发生在其他地方(例如,在框架或新窗口中),但是跨源安全性会阻止您使用JavaScript读取数据


出于同样的原因,您不能使用表单从远程站点读取数据

浏览器旨在阻止JavaScript读取其他网站愿意与浏览器所有者共享的数据


如果数据是公共的(即不需要用户登录、在同一局域网上或任何类似的地方),则使用服务器端技术读取数据(您可以将其代理到浏览器)。

提交表单的行为会触发浏览器导航,以查看HTTP请求返回的响应

阻止它替换当前页面的唯一方法是使用
target
…使导航发生在其他地方(例如,在框架或新窗口中),但是跨源安全性会阻止您使用JavaScript读取数据


出于同样的原因,您不能使用表单从远程站点读取数据

浏览器旨在阻止JavaScript读取其他网站愿意与浏览器所有者共享的数据

如果数据是公共的(即不需要用户登录、在同一局域网上或任何类似的地方),则使用服务器端技术读取数据(您可以将其代理到浏览器)。

发现您可以添加到端点,即使使用Ajax请求,它也可以正常工作

范例

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);
        },

    });
这是如何或为什么起作用的?我没有任何线索。

发现您可以添加到您的端点,即使使用Ajax请求,它也可以正常工作

范例

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);
        },

    });

这是如何或为什么起作用的?我不知道。

您所描述的基本上是XSS,您一直试图使其与AJAX一起工作的问题完全是为了防止XSS攻击。@NiettheDarkAbsol-XSS是一种不同的攻击类型。我是说CSRF,不是吗?太多的首字母缩略词无法跟踪XDCSRF是另一种不同的攻击类型。我不认为这一个有名字,因为它基本上是不可能的。它直接运行到同源策略并反弹。您所描述的基本上是XSS,您一直试图使其与AJAX一起工作的问题完全是为了防止XSS攻击。@NiettheDarkAbsol-XSS是另一类攻击。我的意思是CSRF,不是吗?太多的首字母缩略词无法跟踪XDCSRF是另一种不同的攻击类型。我不认为这一个有名字,因为它基本上是不可能的。它只是直接进入同一来源的政策,并反弹了。但我仍然可以访问来自帖子的信息。只是我被直接重定向到它,而不是简单地将它作为变量或可以在控制台中打印的东西。@Rui-You,发出HTTP请求的浏览器的所有者,确实如此。你,JavaScript的作者,没有。但我仍然可以访问帖子中的信息。只是我被直接重定向到它,而不是简单地将它作为变量或可以在控制台中打印的东西。@Rui-You,发出HTTP请求的浏览器的所有者,确实如此。作为JavaScript的编写者,您不会。