对 API 的跨域 Ajax 请求返回 500（内部服务器错误）响应

Question

当我对 api 进行 GET 调用时，我收到错误响应“500（内部服务器错误）”。这是错误消息：

XMLHttpRequest 无法加载 http://10.10.14.188:4800/api/v1/healthMonitor/DeviceStatus。回复 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://192.168.4.217” 使用权。响应的 HTTP 状态代码为 500。

…虽然我在尝试使用邮递员或使用 curl 命令时得到了响应。

在这个调用中，我必须在标题中传递一个 id。代码如下：

this.getState = function () {
        return $http({
                method: 'GET',
                url: 'http://10.10.14.188:4800/api/v1/healthMonitor/DeviceStatus',
                headers: {'Jab_Device_id': '80f1374192a6d6eb9ebf48e2eba18366','Content-Type': 'application/json'}
                });
    };

另外，我尝试使用 Ajax，但也遇到了同样的错误。代码如下：

$.ajax({
        url: 'http://10.10.14.188:4800/api/v1/healthMonitor/DeviceStatus',
        headers: {
          'Jab_Device_id':'80f1374192a6d6eb9ebf48e2eba18366'  
        },
        method: 'GET',
        withCredentials: true,
        success: function(data){
          console.log('succes: '+data);
        }
      });

Answer 1

var url = "http://10.10.14.188:4800/api/v1/healthMonitor/DeviceStatus";
$http({
    method: 'JSONP',
    url: url,
    headers: {'Jab_Device_id': '80f1374192a6d6eb9ebf48e2eba18366','Content-Type': 'application/json'}
}).
success(function(status) {
    //your code when success
}).
error(function(status) {
    //your code when fails
});

CORS 是跨域资源共享，如果您尝试从一个域访问另一个域，则会出现此错误。

尝试使用 JSONP。在您的情况下，JSONP 应该可以正常工作，因为它只使用 GET 方法。

试试这样的：

来自this answer

但是，如果您无法执行所有其他操作，则可以访问其余 api 更新过滤器以启用 CORS 请求

Answer 2

这与 api 服务器无关。此应用程序在 ngnix 服务器上运行，并且还需要从客户端启用 cors。我刚刚在默认文件中添加了这段代码，它工作了。

location / {
         if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
         }
         if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
         }
         if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
         }
    }