时间戳

首页 > 解决方案 > Jquery使用多部分formposts CORS错误调用外部API

html - Jquery使用多部分formposts CORS错误调用外部API

问题描述

有一个外部 REST API 用于将资源上传到存储库。我可以使用 curl 命令使用它：

curl -k -X POST -u username:password \
-F package_id="1234" \
-F file=@"path_to_a_file" \
https://url_api_prefix

我想实现一个 UI，这样用户就可以通过简单地选择一个文件并单击提交来上传文件。所以我写了一些HTML：

<form id="my-form" method="POST" enctype="multipart/form-data" action="https://url_api_prefix">
    <input type="text" name="package_id">
    <input type="file" name="file">
    <button type="submit">Submit</button>
</form>

这很好用，但它会将我重定向到显示服务器返回的一些 JSON 数据的新页面。我不希望在重定向页面中显示此内容；我想要的是在当前页面上弹出的警报框或类似的东西上。所以我在这里按照答案How to submit html form without redirection? 并用javascript写了这个：

$('#my-form').submit(function(e) {
e.preventDefault();
$.ajax({
    url:$(this).attr('action'),
    type:'post',
    data:$(this).serialize(),
    success:function(data){
        alert('success ' + data.message);
    },
    error:function(jqXHR, textStatus, errorThrown) {
        alert(textStatus + ': Unable to post. HTTP status: ' + errorThrown);
    }
});

但是现在当我点击提交时，它会给我 CORS 错误：

Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经阅读了一些关于 CORS 错误的文章，并且似乎如果它是外部 API，则客户端无能为力。为什么在 js 中使用这个 API 会给我 CORS 错误，但 HTML 本身可以正常工作？有什么办法可以在客户端修复这个 CORS 错误？

标签： htmljqueryajaxcors

解决方案

CORS 是由浏览器管理的东西，用于在不同域地址之间的 JavaScript XMLHttpRequest 操作中确保安全。它适用于 HTML 表单帖子；因为当您提交表单时，您的浏览器实际上会重定向到该域，页面地址会发生变化。但是使用 ajax，您仍然停留在自己的网页上。

有几种解决方案：

  1. 如果第二个网站也由您管理，您应该将“Access-Control-Allow-Origin”添加到来自该第二个网站的响应标头。当你在 JavaScript 中（比如这里的 ajax）对不同的域地址进行异步 http 操作时；HTTP OPTIONS浏览器首先向该目标地址发出一个虚拟的“ ”请求，以检查此标头是否存在。如果它在响应中找到此标头，则它知道它是允许的，并发出您的实际请求。否则，它会阻止您的请求并给出您遇到的错误。

    Access-Control-Allow-Origin: https://the-site-making-the-request.com

  2. 您可以在您的网站上制作自定义的虚假代理页面；在服务器端，您可以使用 CURL 或其他特定于服务器端语言的 http 客户端工具从第二个网站获取内容。然后发回相同的响应；

    $.ajax({
      url:"https://my-own-website.com/webproxy.php?url=https://other-website.com/something",
       ....
       ....

  3. 如果您的应用程序是特定于用户/公司的，则只能在本地网络上访问；您可以在浏览器高级安全设置上禁用 CORS。但这是非常危险的，不推荐。

推荐阅读