如何在 Angular 4 中使用 HTTP GET 请求访问本地 JSON 文件？答案

【问题标题】：How do you access a local JSON file with an HTTP GET request in Angular 4?如何在 Angular 4 中使用 HTTP GET 请求访问本地 JSON 文件？
【发布时间】：2019-02-01 10:42:13
【问题描述】：

我有一个本地 JSON 文件，我正试图通过 HTTP GET 请求访问该文件。我把它放在my-project/src/app/assets/accounts.json 并检查了 JSON 是否正确。

我从 ngOnInit() 调用的服务执行请求 - 我也尝试过在 get 中不使用第二个参数

  public getFieldsFromFile() {
    const url = "assets/accounts.json";
    this.http.get(url, {responseType: "text"})
    .subscribe((data) => console.log(data));
  }

不幸的是，我在console.log 中得到的只是这个错误消息

    HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://users.local/assets/accounts.json", ok: false, …}
    error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "<!DOCTYPE html>↵<html>↵    <head>↵        <title>U…<script src="dist/js/users.js"></script>↵</html>↵"}
    headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message: "Http failure during parsing for http://users.local/assets/accounts.json"
    name: "HttpErrorResponse"
    ok: false
    status: 200
    statusText: "OK"
    url: "http://users.local/assets/accounts.json"

如果我展开，我看到的是index.html的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Users</title>
        <base href="/" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="dist/css/vendor.css">
        <link rel="stylesheet" href="dist/css/users.css">
    </head>
    <body>
        <mv-users id="app-users">
            Loading...
        </mv-users>
    </body>
    <script src="dist/js/vendor.js"></script>
    <script src="dist/js/users.js"></script>
</html>

我知道这可能是路由器问题？这很奇怪，因为我没有任何路由重定向到 index.html:

{
  path: "users",
  component: UsersComponent,
},
{ path: "**", redirectTo: "users" },

【问题讨论】：

重定向到index.html是因为找不到json文件，必须添加到angular配置文件才能到达
只要它在assets中你就可以轻松的从中拉取。您可以只使用 fetch() 并接收您需要的数据。
我刚刚注意到您的错误：消息：“users.local/assets/accounts.json 解析期间的 Http 失败”如何删除该 responseType？看起来您的主要问题是您尝试解析无 JSON 字符串。

标签： angular angular-httpclient

【解决方案1】：

可能需要在请求中发送标头并使用 json 转换来控制响应。检查以下...

public getFieldsFromFile() {
    const url = "assets/accounts.json";
    this.http.get(url, {responseType: "text"}, {headers:'Content-Type': 'application/json'})
    .subscribe((data) => console.log(data.json()));
}

您可以进行语法更正。

【讨论】：

【解决方案2】：

我通过在 json 文件夹中写入这个 .htaccess 文件解决了这个问题：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(CONFIG|DATA).json$ - [NC,F,L]

并在我的服务中编写一个简单的获取

  constructor(private http: HttpClient) {
}

  public getSingleField(field) {
    this.http.get(`./src/app/assets/${field}.json`);
}

【讨论】：