Question

我正在尝试通过AJAX向第三方API发送帖子请求但我正在返回这两个我无法超越或修复的错误。

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。

阻止跨源请求：同源策略禁止在https://my-provided-api-url
读取远程资源

以下是我的HTML提交表单：

<div class="upload">
    <h2>Select a file for upload</h2>
    <form name="addProductForm" id="addProductForm" action="javascript:;" enctype="multipart/form-data" method="post" accept-charset="utf-8">
        <input type="file" id="myFile">
        <input type="submit" value="Submit" id ="submit-button">
    </form> 
</div>

这是我的AJAX请求的jQuery代码：

$(document).ready(function () {
    $("#addProductForm").submit(function (event) {
        event.preventDefault();  
        var formData = $(this).serialize();

        $.ajax({
            url: 'https://my-provided-api-url',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function () {
                alert('Form Submitted!');
            },
            error: function(){
                alert("error in ajax form submission");
            }
        });
        return false;
    });
});

提前谢谢。

Answer 1

错误原因是请求的定义，正是这一行：

async: false

错误的解释是，当您在主线程上执行同步XMLHttpRequest时，用户操作会在未收到响应时被阻止。您可以这样做但不推荐使用

您可以进行同步通话：

async: false

你必须小心，因为行为是不同的。你可以在这里看到不同的Diferences between sync and async ajax request

Answer 2

依次处理这两个错误：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用

这是因为您正在使用async: false，这是非常糟糕的做法。它会阻止UI线程在请求运行时进行更新，这样就可以向用户查看浏览器已挂起的情况。始终使您的请求异步，并使用回调来处理响应。

阻止跨源请求：同源策略禁止在https://my-provided-api-url
读取远程资源

这是一个更大的问题。您发出请求的域名未启用CORS。这意味着您无法通过JavaScript向其API发出请求，因为您将停止购买Same Origin Policy。作为一种解决方法，您可以向服务器发出本地AJAX请求，然后将请求代理到第三方并返回数据。

Ajax multipart / formdata发布请求

2 个答案: