Angular HttpInterceptor 的 withCredentials 與 nodejs 的CORS option 小筆記

目的

只是想用 Angular HttpInterceptor 把所有的 API加入 { withCredentials: true } 屬性然後後端自己為了測試用的小小NodeJS API server的 CORS卻一直被擋掉。

Front-end Side Code

• 這邊使用Angular 提供的 HttpInterceptor 去攔截API然後把API都加入 withCredentials : true.

import { Injectable } from '@angular/core';

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class HttpInterceptorsService implements HttpInterceptor {

constructor() {}

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

const newRequest = req.clone({ withCredentials: true }); // 👈️ 加入 withCredentials: true

console.log(newRequest);

return next.handle(newRequest);

}

}

NodeJS Backend

• 這邊我是使用Express 的CORS來管理 Cross domain 的問題。但是如果只是設定origin的URL還是會遇到CORS的問題。所以corsOptions 要額外把 credentials 設為 true.

// Set up CORS options

const corsOptions = {

origin: "http://localhost:4200", // 👈️ Angular local開發用

methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // Allow these HTTP methods

optionsSuccessStatus: 200, // Set the success status code

allowedHeaders: ['Content-Type', 'Authorization'], // Allow these headers

credentials: true, // 👈️ 要加要不然Angular HttpInterceptor 的 withCredentials: true 會沒用

};

// Use the CORS middleware with the specified options

app.use(cors(corsOptions));

REF

• Express cors middleware