使用 AJAX 调用与 API 服务器通信时出错

Question

我尝试使用 JavaScript (JQuery) 与 JDoodle API 服务器通信，但每次都显示 CORS 错误。但是当我使用 Java Servlets 做同样的事情时，它完美地工作了。我使用了 axios，但它也显示“网络错误”。 我的函数如下所示：

function x()
        {
            var dataJ = {
                clientId: ''XXXXXXXXX,
                clientSecret:'XXXXXXXXXX',
                language:'PHP',
                script:'',
                versionIndex: '0'
            };
            $.ajax({
                type:'POST',
                url:'https://api.jdoodle.com/v1/execute/',
                data: dataJ,
                success: function(e)
                {
                    console.log(e);
                },
                error: function(e)
                {
                    console.log(e.statusText);
                }
            });
        }

Answer 1

它是一个不允许其他客户端使用站点功能的安全策略：

见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

该站点的唯一页面可以向站点发送消息或该站点在自己的站点上激活 allow-access-allow-origin

Answer 2

CORS 由后端 API 控制，在您的情况下，您无法控制它，即 https://api.jdoodle.com/v1/execute/。

浏览器阻止您的代码访问响应，因为浏览器在响应中看不到 Access-Control-Allow-Origin。

通过代理发出请求仍然可以正常工作，代理可以代表您的请求发送适当的 CORS 标头。

const proxy = "https://cors-anywhere.herokuapp.com/";
const url = "https://api.jdoodle.com/v1/execute/"; 
fetch(proxy + url)
  .then(response => response.text())
  .then(contents => console.log(contents))
  .catch(() => console.log("CORS Error" + url ))

适合您的情况

const proxy = "https://cors-anywhere.herokuapp.com/";
const url = "https://api.jdoodle.com/v1/execute/";

function x() {
  var dataJ = {
    clientId: "XXXXX",
    clientSecret: "XXXXXXXXXX",
    language: "PHP",
    script: "",
    versionIndex: "0"
  };
  $.ajax({
    type: "POST",
    url: proxy + url,
    data: dataJ,
    success: function(e) {
      console.log(e);
    },
    error: function(e) {
      console.log(e.statusText);
    }
  });
}

通过代理发出请求将以这种方式工作

1. CORS 代理会将您的请求转发到https://api.jdoodle.com/v1/execute/
2. 来自https://api.jdoodle.com/v1/execute/ 的返回响应带有Access-Control-Allow-Origin 标头。
3. 现在您的浏览器可以在响应标头中看到 Access-Control-Allow-Origin 标头。

更详细的解释你可以看看这个

https://stackoverflow.com/a/43881141/2850383