I've encountered an issue with the proxy configuration in Angular. I'm unsure if it's a problem within my Angular settings or if there's a configuration issue in Spring.
For testing purposes, I have a backend built in springboot to handle simple requests from the frontend. However, when attempting to make requests to the backend through Angular, I consistently receive a CORS error:
Access to XMLHttpRequest at 'http://localhost:8080/api/people/checks' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've tried creating a proxy using Angular's Documentation but it seems like the proxy isn't functioning as expected.
proxy.conf.mjs
export default [
{
context: ['/api'],
target: 'http://localhost:8080',
secure: false,
logLevel: 'debug',
// pathRewrite: { '^/api': '' }
}
];
angular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "clubzin:build:production"
},
"development": {
"browserTarget": "clubzin:build:development",
"proxyConfig": "src/proxy.conf.mjs"
}
},
"defaultConfiguration": "development"
}
enviroments.ts
export const environment = {
production: true,
apiUrl: 'http://localhost:8080',
username: 'danilo',
password: '35bf85fe-c672-4d06-8cff-4485ed89211a',
baseUrl: '/api'
};
people.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { CheckMail } from '../../home/model/check-mail';
import { environment } from '../../../environments/environment';
import { Buffer } from 'buffer';
@Injectable({
providedIn: 'root'
})
export class PeopleService {
private readonly API = `${environment.apiUrl}${environment.baseUrl}/people`;
constructor(private httpClient: HttpClient) { }
checkMailInUse(mail: string) {
let credential = Buffer.from(`${environment.username}:${environment.password}`).toString('base64');
let headers = { Authorization: 'Basic ' + credential, mail: mail };
let data = this.httpClient.get<CheckMail>(`${this.API}/checks`, { headers });
return data;
}
}
My question now is, am I overlooking something? Or do I need to configure something in springboot as well?
NOTE: When adding the CORS annotation in the controller, the request works perfectly.