Angular に別ドメインのブログRSSを読み込み(CORS対応など)

Angular のページに、ブログのRSSフィードを読み込みたいと。

1.オリジン間リソース共有(CORS)

単純に、AngularのHttpClientでリクエストを投げると、以下のようなエラー。

ccess to XMLHttpRequest at ‘https://www.typea.info/blog/index.php/feed/’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

開発中は、すでに運用しているブログに、localhostからアクセスするため、当然オリジンが異なるため、対応を行う。

2.サーバー側対応

以下あたりを参考に、サーバー側の対応

CORSの対応について、ステップバイステップで解決していっており、わかりやすい。

https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f

他にはこの辺り

サーバー側の設定 (/etc/httpd/conf.d/xxxx.conf) に以下を追記し、ブログのURL(https://www.typea.info/blog/index.php/feed/)に対して、設定を行う

<Directory "/var/www/html/blog">
    Header Set Access-Control-Allow-Origin "*"
    Header Set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</Directory>

3.Angularで扱うために、XMLをJSONに変換

変換ライブラリのインストール

npm install —save fast-xml-parser

とりあえず、RSSを取得し、コンソールに出力する。

responseType : ’text’ を指定して、テキストとして取得する必要あり

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as xmlParser from 'fast-xml-parser';

@Injectable()
export class FeedService {

    constructor(private http: HttpClient){}
    async getFeeds() {
        try {
            const url = 'https://www.typea.info/blog/index.php/feed/';
            const res = await this.http.get(
                url, 
                { responseType : 'text'}
                ).toPromise();
                
            console.log(res);
            const json = xmlParser.parse(res);
            console.log(json);
            return json;    
        } catch(e) {
            console.log(e);
        }
    }
}