Question

我有一个本地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" },

Answer 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()));
}

您可以进行语法更正。

Answer 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`);
}

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

2 个答案: