当使用jQuery AJAX请求API时出现CORS错误

Question

我正在使用jQuery ajax向某个API发送请求。由于跨域资源共享策略，浏览器控制台显示CORS错误。

以下是我的代码

$.ajax({
        url: sendHere,//api url
        type: 'GET',
        contentType: 'text/plain',
        crossDomain: true,
        beforeSend: function(xhr){
            xhr.withCredentials = true;
        },
    }).done(function (result) {

        console.log(result);

    }).error(function (err) {
        //console.log(err);
    });

错误

请求的资源上存在'Access-Control-Allow-Origin'标头。因此，源'http://www.mywebsite.com'不允许访问。

我尝试通过安装Chrome扩展程序来解决这个问题以启用允许跨域请求。这个扩展程序在某种程度上解决了我的问题并从API获得了响应。但是安装扩展程序并不好。

我还尝试使用JSONP(dataType:'jsonp')发出请求，但是API返回的响应不是JSON格式，而是字符串，因此会出现错误。

JSONP代码

$.ajax({
        url: sendHere,//api url
        type: 'GET',
        crossDomain: true,
        dataType:'jsonp',
    }).done(function (result) {

        console.log(result);

    }).error(function (err) {
        //console.log(err);
    });

未捕获的引用错误：E0002未定义，其中“E0002”是来自API的响应字符串

!!!请帮忙!!!

- Selvesan Malakar

---

当您将console.log(result)语句更改为console.log(JSON.stringify(result))时会发生什么？ - David R

@DavidR 即使在 console.log(JSON.stringify(result)) 上也会出现错误。 - Selvesan Malakar

@DavidR 需要在客户端计算机上启动SSLVPN以进行API请求。 - Selvesan Malakar

@DavidR https://jsfiddle.net/9pqhwrpv/ - Selvesan Malakar

我已经删除了 type: 'GET' 并将 contentType 从 contentType: 'text/plain', 更改为 contentType: 'application/json',，并使用一个在此处正常工作的 Web 服务测试了代码 => https://jsfiddle.net/9pqhwrpv/2/ - David R

Answer 1

这里有两种情况：

1. 如果您控制API代码，则

   更改标头并添加您的来源。

2. 如果您无法更改来自API的CORS标头，则

   您只有一种选择：使用您喜欢的任何语言创建后端代码（您自己的API），进行HTTP请求并获取数据。现在使用您自己的API在前端获取数据。

- Ravi Kumar

---

谢谢，这个方法可行。 我使用 PHP 作为我的后端代码，并使用它的 CURL 发送请求到 API，成功捕获响应。再次非常感谢您。 - Selvesan Malakar

@SelvesanMalakar 如果这对您有用，您可能希望将其接受为正确答案。它可能会帮助其他人找到相同/类似问题的正确答案。 - Ravi Kumar

从前端和后端调用API有什么不同吗？ - Fauzan Edris

Answer 2

跨域错误是浏览器为了安全起见维护的跨域请求策略。 要解决问题，您需要在服务器编码中允许跨域请求，或者如果您无法访问服务器API代码，则需要从您的服务器向API服务器发出API调用。

- aravithapa