Angular 5 本地主机访问控制允许来源错误

Question

我倾向于 Angular，尝试使用 HTTP 获取我 PC 上的文件。我想模拟服务器场景，因此尝试使用以下服务提供文件，（实时服务器、浏览器同步和 xampp）一次一个，但每次尝试我都会收到错误

Failed to load http://localhost/ng-data/products.json: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4200/' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access

当我在浏览器中粘贴 url (http://localhost/ng-data/products.json) 时，我可以获得文件。

Answer 1

因为你正在测试，我建议你使用 Chrome 扩展。请在如下所示的 Chrome 扩展列表中搜索并启用它。说不定你的问题就迎刃而解了。

Answer 2

我找到了其他 2 种方法来解决这种情况，

解决方案 1：

要将 products.json 文件更改为 products.php，然后在顶部添加：

<?php  
  'header(Access-Control-Allow-Origin: *)';
  'header(Content-Type: application/json)'
?>

最后，将您要连接的 url 从 products.json 更改为 products.php

解决方案 2

使用代理配置请参阅：Angular documentatiom

按照以下步骤操作：

1- 将服务中的 url 更改为“/api/products”而不是“http://localhost/products”

2- 在 angular 项目的根目录中创建 proxy.config.json 文件在其中添加此代码：

    {
  "/api/*": {
    "target": "http://localhost",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

3- 在服务器上创建文件夹 api 并在其中添加 products.json。

注意：在我的例子中，我使用的是没有指定端口的本地主机，因为我正在使用 xampp。但如果你使用节点，例如你将指定端口，如：localhost:3000 in proxy.config.json

Angular 5 本地主机访问控制允许来源错误

Angular 5 Access-Control-Allow-Origin error with localhost

localhost

cors

angular-http

解决方案 1：

解决方案 2