Jquery 使用多部分表单调用外部 API CORS 错误

Question

有一个外部 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 数据。我不希望这显示在重定向的页面中;我想要在当前页面上弹出的警报框或类似内容。所以我在这里遵循了答案如何在不重定向的情况下提交 html 表单？并用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错误吗？

Answer 1

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

对此有几种解决方案：

1. 如果第二个网站也由您管理，则应将"访问控制允许源"添加到来自第二个网站的响应标头中。当您在 JavaScript 中进行异步 http 操作(例如此处的 ajax(到不同的域地址时;浏览器首先向该目标地址发出虚拟的"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。但这是非常危险的，不建议这样做。