How to Connect a Yii2 REST API to Angular

To connect Angular to a Yii2 REST API, expose a JSON resource endpoint in Yii, allow the Angular app’s exact origin through CORS if the apps run on different origins, and call the endpoint through Angular’s HttpClient. For a database-backed resource, Yii’s ActiveController supplies standard CRUD actions; an Angular service can call those routes, while an interceptor adds the access token and centralizes error handling. The examples below use a User resource and illustrative origins—adjust the model, routes, fields, and origins to match your application.

Choose how the API and Angular app will be served

First decide whether the browser will see the API and Angular app as the same origin. An origin is the combination of scheme, host, and port; for example, http://localhost:4200 and http://localhost:8000 are different origins.

#	Preview	Product	Price
1		Yii2 Application Development Cookbook - Third Edition	$57.99	Buy on Amazon
2		Competitive Programming 4 - Book 1: The Lower Bound of Programming Contests in the 2020s	$20.79	Buy on Amazon
3		Yii2 By Example	$50.99	Buy on Amazon
4		Competitive Programming 4 - Book 2: The Lower Bound of Programming Contests in the 2020s	$24.00	Buy on Amazon
5		The C Programming Language	$42.74	Buy on Amazon

• Same origin: Serve or proxy API requests through the Angular app’s public host, such as https://app.example.com/api. This avoids browser cross-origin requests, although your server or reverse proxy still needs to route those requests to Yii.
• Separate origins: The browser calls the Yii host directly, such as https://api.example.com. Configure Yii CORS for the exact Angular origin and the methods and headers the client needs.

Keep the API as a separate application or module if that makes deployment, routing, or origin policy easier to manage. In either arrangement, the Angular service’s base URL must match the URL the browser can actually reach.

Create a database-backed Yii2 REST resource

Use ActiveController for standard CRUD

When the resource is represented by an ActiveRecord model, extend yiirestActiveController and set modelClass. It provides the standard REST actions where they fit your domain. Use yiirestController or add and override actions when you need behavior that does not map cleanly to ordinary CRUD.

#1 Best Overall

Yii2 Application Development Cookbook - Third Edition

$57.99

Buy on Amazon

<?php
namespace appcontrollers;

use yiirestActiveController;

class UserController extends ActiveController
{
    public $modelClass = 'app\models\User';
}

Configure a REST URL rule in Yii’s URL manager. With pretty URLs enabled, a rule for the singular controller ID user commonly exposes the plural resource path /users; verify the generated routes for your application, especially if you use an API prefix or customized pluralization.

'components' => [
    'urlManager' => [
        'enablePrettyUrl' => true,
        'showScriptName' => false,
        'rules' => [
            ['class' => 'yii\rest\UrlRule', 'controller' => 'user'],
        ],
    ],
],

Confirm the route map before wiring up Angular. A typical resource exposes collection and item routes like these, subject to your configured URL rule and enabled actions:

Yii’s REST controller layer supports HTTP method validation and content negotiation, alongside hooks for authentication, authorization, and rate limiting. Keep only the actions that make sense for the resource; a generic CRUD endpoint should not replace domain-specific rules.

Validate input and expose only intended fields

Define model validation rules for the attributes the API accepts, and test invalid requests as well as valid ones. For example, an email field should have an email validator if the application requires email-shaped values. Ensure attributes that may be mass-assigned are safe under the model’s validation rules; validation is not a substitute for authorization.

Choose the fields and related records serialized in responses. An allowlist is safer than returning every database column, particularly for user records:

Rank #2

Competitive Programming 4 - Book 1: The Lower Bound of Programming Contests in the 2020s

$20.79

Buy on Amazon

public function fields()
{
    return ['id', 'name', 'email'];
}

Adapt that list to the actual model and response contract. Do not serialize password hashes, authentication keys, or other internal fields. Apply the same care to relations: include only those the client needs and is permitted to see.

Configure stateless authentication and authorization

Yii’s REST authentication guidance describes APIs as usually stateless: sessions and cookies should not be the mechanism for identifying API callers. Configure the user component for a stateless API, disable sessions where appropriate, set loginUrl to null when a browser login redirect is unsuitable, and implement findIdentityByAccessToken() on the identity class if the chosen token design relies on it.

For a browser client, an access token in an Authorization header is a straightforward contract. Yii supports several authentication approaches, but a bearer token is a common fit for this pattern. Do not put long-lived credentials in source code, URLs, or logs; send tokens only over HTTPS. Token storage, expiration, and refresh behavior must follow the security design of the application.

Configure an authenticator for the API controller or application. If using Yii’s HttpBearerAuth, the controller behavior can be arranged with CORS first and authentication afterward:

use yiifiltersCors;
use yiifiltersauthHttpBearerAuth;

public function behaviors()
{
    $behaviors = parent::behaviors();

    // Replace any inherited authenticator so OPTIONS can be exempted.
    unset($behaviors['authenticator']);

    $behaviors['corsFilter'] = [
        'class' => Cors::class,
        'cors' => [
            'Origin' => ['http://localhost:4200', 'https://app.example.com'],
            'Access-Control-Request-Method' => [
                'GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS',
            ],
            'Access-Control-Request-Headers' => ['Authorization', 'Content-Type'],
        ],
    ];

    $behaviors['authenticator'] = [
        'class' => HttpBearerAuth::class,
        'except' => ['options'],
    ];

    return $behaviors;
}

The origins in this example are placeholders: replace them with the real development and production origins, including the correct scheme and port. CORS must run before authentication and authorization, and OPTIONS must not be blocked by the authenticator; browsers use that preflight request to ask whether the actual cross-origin request is allowed. CORS controls browser access to responses—it does not authenticate users or secure the API against non-browser clients.

Rank #3

Yii2 By Example

$50.99

Buy on Amazon

Authentication answers who is making a request; authorization decides what that identity may do. Implement checkAccess() or an equivalent policy for per-action and per-record permissions. For example, being authenticated should not by itself permit a user to read or modify every other user’s record. Keep rate limiting enabled or configure it deliberately for your deployment.

Call the Yii routes from Angular

Register HttpClient and configure the API base URL

Register Angular’s HttpClient using the setup style supported by your Angular application: standalone applications commonly use provideHttpClient(), while NgModule-based applications may use HttpClientModule. Keep the API base URL in environment configuration rather than scattering hostnames through components.

export const environment = {
  apiUrl: 'https://api.example.com',
};

For local development, set this value to the Yii URL and prefix that your Yii routing actually serves. Do not assume that the route is /api/users or /users without checking the configured route map.

Put resource requests in an injectable service

Use a service for the resource’s HTTP operations. The following types are illustrative; adapt fields and pagination metadata to your model and Yii serializer configuration.

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

export interface User {
  id: number;
  name: string;
  email: string;
}

export interface PagedResponse<T> {
  items: T[];
  _links: Record<string, unknown>;
  _meta: Record<string, unknown>;
}

@Injectable({ providedIn: 'root' })
export class UsersApi {
  private readonly url = `${environment.apiUrl}/users`;

  constructor(private readonly http: HttpClient) {}

  list(params?: HttpParams): Observable<PagedResponse<User>> {
    return this.http.get<PagedResponse<User>>(this.url, { params });
  }

  create(input: { name: string; email: string }): Observable<User> {
    return this.http.post<User>(this.url, input);
  }

  update(id: number, input: Partial<Pick<User, 'name' | 'email'>>): Observable<User> {
    return this.http.patch<User>(`${this.url}/${id}`, input);
  }

  remove(id: number): Observable<void> {
    return this.http.delete<void>(`${this.url}/${id}`);
  }
}

Angular serializes ordinary object bodies as JSON. Match the verbs and paths to the actions Yii exposes, and match the TypeScript response types to the API’s actual serialized representation; TypeScript types do not validate a server response at runtime.

Rank #4

Competitive Programming 4 - Book 2: The Lower Bound of Programming Contests in the 2020s

$24.00

Buy on Amazon

Pass filters and pagination deliberately

Build query strings with HttpParams rather than concatenating unescaped values into the URL. Yii REST pagination commonly accepts page and page-size query parameters, but the endpoint’s configuration and response serializer determine the usable contract. Check the API response and configure both sides to agree about parameter names, page numbering, and response shape.

const params = new HttpParams()
  .set('page', 1)
  .set('per-page', 20)
  .set('name', searchTerm);

this.usersApi.list(params).subscribe({
  next: (result) => {
    this.users = result.items;
    this.pagination = result._meta;
  },
  error: (error) => this.handleError(error),
});

Do not assume the list response is a bare array if Yii is returning a paginated representation. Conversely, if the API is configured to return a different shape, update the TypeScript type and component code instead of forcing it into this example.

Attach access tokens and handle HTTP errors

An Angular interceptor can add the token consistently without repeating header code in each service. The token provider below represents your application’s chosen storage and refresh design; do not hard-code a real credential into the interceptor.

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { TokenStore } from './token-store';

export const authInterceptor: HttpInterceptorFn = (request, next) => {
  const token = inject(TokenStore).accessToken();
  if (!token) {
    return next(request);
  }

  return next(request.clone({
    setHeaders: { Authorization: `Bearer ${token}` },
  }));
};

Register the interceptor using the provider mechanism for your Angular version. If the API is on another origin, ensure the browser request’s Authorization header is permitted by Yii’s CORS configuration. A bearer header does not require cookie credentials; only enable credentialed cross-origin requests if the authentication design actually uses them and configure the server accordingly.

Handle errors where they are actionable: a form can display validation feedback, while a global interceptor or error service can coordinate session state and shared notifications. Do not collapse all failures into the same message:

Best Value

The C Programming Language

$42.74

Buy on Amazon

Inspect Yii’s actual error payload and adapt the client to it. A TypeScript generic or a user-facing message does not replace server-side validation and access checks.

Debug CORS and API requests in the browser

When a request fails, use the browser’s Network panel to separate a preflight problem from an API or application error. A preflight failure means the browser may not send the actual request at all.

1. Check the URL: Confirm that Angular’s base URL plus resource path matches a generated Yii route, including any API prefix.
2. Inspect OPTIONS: For a cross-origin request with headers such as Authorization, inspect the preflight’s status and returned Access-Control-Allow-* headers.
3. Check allowed origins, methods, and headers: Ensure the browser’s requesting origin, actual verb, and requested headers are permitted by Yii’s CORS configuration.
4. Check the actual request: If preflight succeeds, confirm the request body is JSON where expected and that the expected Authorization header is present.
5. Separate authentication from preflight: Verify that OPTIONS is exempt from authentication while the real resource request is authenticated.
6. Read the response status and payload: Distinguish unauthenticated, unauthorized, validation, and rate-limit responses rather than treating each as a CORS issue.
7. Check serialized output: Test that responses contain only intended fields and relations, and never credentials or internal columns.

A CORS message in the browser can mask an underlying server response if the response lacks CORS headers. Verify the preflight and actual response headers before changing Angular code.

Move from local development to production

Use HTTPS wherever access tokens travel between the browser and API. Replace local and example origins with the exact production origin, remove development origins from production policy when they are no longer needed, and avoid wildcard origins for a token-bearing browser client. A same-origin reverse proxy can reduce cross-origin configuration, but it does not remove the need for authentication, authorization, validation, or safe serialization.

Quick Recap

Bestseller No. 1

Yii2 Application Development Cookbook - Third Edition

$57.99

Bestseller No. 2

Competitive Programming 4 - Book 1: The Lower Bound of Programming Contests in the 2020s

$20.79

Bestseller No. 3

Yii2 By Example

$50.99

Bestseller No. 4

Competitive Programming 4 - Book 2: The Lower Bound of Programming Contests in the 2020s

$24.00

Bestseller No. 5

The C Programming Language

$42.74

• Confirm production URLs use HTTPS and match the configured Angular environment.
• Restrict Yii CORS origins to the Angular origins that should access the browser API.
• Keep server-side permission checks and deliberate rate-limit behavior in place.
• Verify exposed fields and relations against real response payloads before serving user data.
• Check deployed route paths, preflight behavior, and error handling in the browser rather than relying only on local configuration.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.