带有CORS的codeigniter API错误的Angular 4 Http请求，无法访问API函数

Question

我在 localhost (xampp) / codeigniter 上有 api，我试图通过 angular 4 访问它，并且浏览器一直在控制台中显示此错误。 api 在邮递员中工作正常。

[火狐]：

跨域请求被阻止：同源策略不允许读取位于http://lvh.me/ci-abc/api/get_alltasks 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

[铬]：

无法加载http://lvh.me/ci-abc/api/get_alltasks：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 访问。

我也尝试将 API url 更改为 localhost 和 127.0.0.1，但没有成功。我是初学者，如果我遗漏了什么，请原谅我。

Angular 4 中的服务功能

gettasks()
  {
    return this.http.get('http://lvh.me/ci-abc/api/get_alltasks')
    .map(res=>res.json());
  }

codeigniter 中的 API 函数

function get_alltasks_get()
    {
        {
            $result = $this->todo_model->get_alltasks();

            if ($result) {
                $this->response($result, 200);
            } else {
                $this->response("No record found", 404);
            }
        }
    }

Answer 1

这不是 Angular 问题，因为您与服务器不在同一个域中导致的问题是，例如，如果您尝试从 johndoe.com 向 example.com 发送请求，您将收到错误消息，它是阻止请求的浏览器！

浏览器首先发出header请求，如果请求被允许，将发出下一个具有真实方法类型的请求。

对于 CodeIgniter，尝试将 OPTIONS 添加到允许的方法中。

header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");

看看这个answer

Answer 2

PHP 上的 CORS

浏览器为跨站点请求发送特定的HTTP headers 从XMLHttpRequest 或Fetch API 内部发起。它 还希望看到通过跨站点发回的特定 HTTP 标头 回复。

这些标头的概述，包括示例 JavaScript 代码 发起请求并处理来自服务器的响应，以及 对每个标题的讨论，can be found in the HTTP Access Control (CORS) 文章，应作为本文的配套文章阅读 一个。

并且应该作为这篇文章的配套文章阅读。 This article 涵盖处理访问控制请求和 在 PHP 中制定访问控制响应。

如果您无权配置 Apache，您仍然可以从 PHP 脚本发送标头。这是在您的 PHP 脚本中添加以下内容的情况：

<?php
header("Access-Control-Allow-Origin: *");