jQuery/Ajax Rest api 请求答案

【问题标题】：jQuery/Ajax Rest api requestjQuery/Ajax Rest api 请求
【发布时间】：2017-03-29 09:00:26
【问题描述】：

我正在尝试从 localhost 向 realla https://realla.co/api/#/ 发出 rest api 请求，我有一个 api 密钥，可以通过 PHP 发出请求，但使用 ajax 时遇到问题：

var URL = "https://realla.co/api/v1/listings/search";
var usr = 'api';
var psw = 'hidden';
$.ajax({
  type: "POST",
  dataType: "json",
  contentType: "application/json",
  url: URL,
  crossDomain: true,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + btoa(usr + ":" + psw))
  },
  success: function(result) {
    console.log('success');
  },
  error: function(req, status, err) {
    console.log('Something went wrong', status, err);
  }
});

返回错误

XMLHttpRequest cannot load https://realla.co/api/v1/listings/search. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dw.dev' is therefore not allowed access. The response had HTTP status code 403.

我尝试使用 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en 解决该问题，但仍然收到相同的消息。

我添加了以下功能（运行 Wordpress）：

/*
 * Modify HTTP header
 */
function new_headers($headers) {

    if (!is_admin()) {
        $headers['Access-Control-Allow-Origin'] = '*';   
        $headers['Access-Control-Allow-Methods'] = 'GET, POST, PATCH, PUT, DELETE, OPTIONS';   
        $headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, X-Auth-Token';   

    }

    return $headers;     
}
add_filter('wp_headers', 'new_headers');

我已经尝试过其他 API (Facebook) 并且效果很好，但我想知道我是否遗漏了什么。

Realla 的文档很薄，但我想知道我是不是做错了什么。

谢谢

【问题讨论】：

添加 'Access-Control-Allow-Origin' : * 在你的后端代码中。

标签： javascript jquery ajax rest

【解决方案1】：

让我们试试这个

会有用的

在请求的资源文件中添加标题

 <?php

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
 ?>

【讨论】：

试过了，但仍然收到相同的消息（为了清楚起见，我已将代码添加到原始问题中）。

【解决方案2】：

问题是 realla 的一面。 API 防止通过 ajax 发出请求。

为了使用 API，您需要从服务器而不是客户端浏览器发出请求。

很抱歉浪费了人们的时间，希望这个答案能帮助那些觉得自己的头撞到砖墙上的人。

【讨论】：