• Angular2 and WordPress API Headers

    By developing the Angular2 App its usual running on localhost… e.g. localhost:5555 or localhost:3000, depending on your development config

    If you are using json-api plugin for WordPress and trying to retrieve something like GET www.wp-example.host?json=get_recent_post from you test localhost Angular2 instance, you would probably run into this kind of error:

    No 'Access-Control-Allow-Origin' header is present

    To slove this we need to tell WP Server to response with Access-Control-Allow-Origin header. To do this edit (or create) .htaccess file in your root WP dir (usually its /var/www/html) with this content:

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    Header add Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

    Do not forget to ensure, that apache has Header module enabled:

    sudo a2enmod headers
    sudo service apache restart

    note: If you are using Docker as WP Container, do not restart apache server, but restart docker container

    And here the code of the method, I am using in Angular2 Component to get WP List of Posts:

    export const contentHeaders = new Headers();
    contentHeaders.append('Accept', 'application/json');
    contentHeaders.append('Content-Type', 'application/json');
    private getPostsList() {
        this.http.get('http://wp.host?json=get_recent_posts', {headers: contentHeaders})
          .map(res => res.json())
          response => {
            this.posts = response.posts;
          error => {