尝试使用 AngularJS 将图像上传到 Cloudinary 时，Access-Control-Allow-Origin 不允许来源 http://localhost.com:8000

Posted 2023-03-25

【中文标题】尝试使用 AngularJS 将图像上传到 Cloudinary 时，Access-Control-Allow-Origin 不允许来源 http://localhost.com:8000

【英文标题】：Origin http://localhost.com:8000 is not allowed by Access-Control-Allow-Origin when trying to upload image to Cloudinary using AngularJS

【发布时间】：2017-07-25 09:03:13

【问题描述】：

我正在尝试使用我的 Angular 控制器将图像上传到 Cloudinary。请求未签名，我没有使用任何库。它只是一个简单的 POST 请求，当我在静态 html 页面上使用 jQuery 尝试它时，它起作用了。

不管怎样，这是我的控制器：

myapp.controller('DashboardController', ['$scope', '$http', function($scope, $http) 

    $scope.uploadPicture = function() 
        var formData = new FormData();
        var file = document.getElementById("file").files[0];

        formData.append("file", file);
        formData.append("upload_preset", "[MY UNSIGNED UPLOAD PRESET]");

        $http(
            method: 'POST',
            url: 'https://api.cloudinary.com/v1_1/[MY CLOUD NAME]/image/upload',
            data: formData,
        ).then(function successCallback(response) 
            alert(respose.secure_url);
        , function errorCallback(response) 
            console.log(response);
            alert(response);
        );
    ;

]);

我得到的错误如下：

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/[MY CLOUD NAME]/image/upload. Origin http://localhost.com:8000 is not allowed by Access-Control-Allow-Origin.

为什么会出现此错误？请提供任何帮助。重复我之前所说的，这段用 jQuery 编写的确切代码在名为 index.html 的静态页面上完美运行，所以我有点迷失在这个问题上。

这是 jQuery 代码：

(function() 
        $('#uploadBtn').click(function() 
            var formData = new FormData();
            var file = document.getElementById("file").files[0];

            console.log(file);

            formData.append("file", file);
            formData.append("upload_preset", "[MY UNSIGNED UPLOAD PRESET]");

            $.ajax(
                url: "https://api.cloudinary.com/v1_1/[MY CLOUD NAME]/image/upload",
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function( response )
                    alert(response.secure_url);
                ,
                error: function( jqXhr, textStatus, errorThrown )
                    console.log( errorThrown );
                
            );
        );
    )();

和

<input type="file" id="file"/>
<button id="uploadBtn">Upload</button>

以上所有内容都在一个名为 index.html 的静态 html 文件中。

【问题讨论】：

看起来像服务器端错误。是否启用了 CORS？

@suraj 我相信是这样，因为正如我之前所说，这适用于静态 html 页面。

“当我在静态 html 页面上使用 jQuery 尝试它时，它起作用了” 显示该代码。另外，当您这样做时，包含该 jQuery 代码的确切源页面 URL 是什么？

@T.J.Crowder 更新帖子。

再次：您提出请求时的确切 URL 是什么？

【参考方案1】：

我怀疑您使用的浏览器 不是 Chrome，而是从文件系统而不是 Web 服务器进程运行“静态 HTML”页面；例如，来自 file:// URL 而不是 http:// URL（例如您的 Angular 示例中的 http://localhost:8000）。

不同的浏览器对待file:// URL 的方式不同。有些人，比如 Chrome，得出结论 no 跨域调用对于 file:// URL 是有效的（甚至其他 file:// URL 也不能可靠地被认为是同一来源），但其他一些浏览器采用一种非常不同的方法，并考虑 file:// URL 完全不受同源策略的约束，允许它们查询任何内容。

所以区别不是 Angular 与 jQuery，区别在于 file:// URL 与 http:// URL。所有http://（和https://）URL 都受到所有浏览器的SOP。

如果我是正确的，问题是您尝试发布的服务不允许来源localhost:8000。

【参考方案2】：

试试这个，

$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = "*";
$httpProvider.defaults.headers.common['Access-Control-Allow-Methods'] = "POST, GET, OPTIONS, PUT, PATCH";
$httpProvider.defaults.heade`enter code here`rs.common['Access-Control-Allow-Headers'] = "Origin, Content-Type, Accept, Authorization";

我在从本地运行我的应用程序时遇到了类似的问题，并通过添加这些标头来解决它。