允许通过 AJAX 访问我的 API

Posted 2023-02-27

【中文标题】允许通过 AJAX 访问我的 API

【英文标题】：Allow my API to be access via AJAX

【发布时间】：2014-11-20 01:16:02

【问题描述】：

我有一个在服务器上获取某个日期的 API。

public function post_events()

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST');
    header("Access-Control-Allow-Headers: X-Requested-With");

    $city = Input::post('city','all');
    $c = Model_chart::format_chart($city);
    return $this->response($c);

它适用于通常的 curl 方法。但我试图在 Angular.js 上使用 $http 访问它，但它给了我这个错误。

XMLHttpRequest 无法加载 http://event.deremoe.com/vendor/events.json。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://app.event.chart” 访问。

如您所见，我已经在函数中添加了标题。我还检查了 curl 并在调用 api 时附加了标题 Access-Control-Allow-Origin。

这里有什么我遗漏的吗？

更多信息：这是通过正常 curl 返回给我的标题信息。

Remote Address:104.28.19.112:80
Request URL:http://event.deremoe.com/vendor/events.json
Request Method:OPTIONS
Status Code:404 Not Found

Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:event.deremoe.com
Origin:http://app.event.chart
Referer:http://app.event.chart/
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/37.0.2062.120 Safari/537.36

Response Headersview source
CF-RAY:16f687416fe30c35-SEA
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Thu, 25 Sep 2014 10:27:17 GMT
Server:cloudflare-nginx
Set-Cookie:__cfduid=d1a9e4283faacc0a2b029efef586b6b931411640837342; expires=Mon, 23-Dec-2019 23:50:00 GMT; path=/; domain=.deremoe.com; HttpOnly
Transfer-Encoding:chunked
X-Powered-By:php/5.4.30

【问题讨论】：

如果真的设置了标头，你能检查ajax调用的网络响应吗？

@johnSmith 我该怎么做？ ...我在上面添加了响应。

你的ajax请求是跨域的吗？如果是这样，您需要使用 jsonp 并将响应包装在提供的回调中（如果存在），以便在通过 cURL 访问时不会弄乱，以便它工作

@martincarlin87 如何检查？

@MrA 例如在 chrome 中，您可以打开开发者工具栏，然后打开网络选项卡，在那里您将看到请求和响应，当您单击它时，您会看到请求/响应标头

【参考方案1】：

浏览器首先对您的 api 进行飞行前选项调用，这就是它触发错误的原因：Access-Control-Allow-Origin。您可以在您的 api 上创建一个接受所有 OPTIONS 请求的端点，并且您还必须在此处设置标头，就像在发布事件中一样：

header('Access-Control-Allow-Origin: *');

您还收到的状态代码是 404 Not Found。这意味着无法找到 OPTIONS 端点。

【讨论】：

所以我必须添加 header('Access-Control-Allow-Methods: GET, POST','OPTIONS'); ?你能提供更多解释吗？

我想您在上面发布的那段代码与端点匹配。让我们假设 /events 与 POST 方法匹配您的功能。当您在收到 POST 请求之前尝试从浏览器执行此 ajax 调用时，您将在 /events 处收到一个 OPTIONS 请求。您必须在 API 中定义与以下函数匹配的 OPTIONS /events 端点：public function options_events() header('Access-Control-Allow-Origin: *');

也可以在这里查看特定于 Angular 的内容：OPTIONS-angular