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

Question

我尝试使用 JavaScript (JQuery) 与 JDoodle API 服务器通信，但每次它都显示 CORS 错误。但是当我使用 Java Servlets 做同样的事情时，它工作得很好。我用的是axios，但是它也说'Network Error'。我的函数如下所示：

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 header。

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);
    }
  });
}

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

CORS 代理会将您的请求转发给 https://api.jdoodle.com/v1/execute/
来自 https://api.jdoodle.com/v1/execute/ 的 return 响应 Access-Control-Allow-Origin headers.
现在您的浏览器可以在响应 header.

Access-Control-Allow-Origin

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

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

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

Error while communicating with API server using AJAX calls

javascript

ajax

jquery

axios

jdoodle