During the process of developing an Angular and NestJS app with NGXS for state management, I encountered a CORS error while serving my application. The error message in the console indicated:
Access to XMLHttpRequest at 'localhost:333/api/product-index' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
After researching potential solutions, I came across this informative article which provided insights on managing CORS in Angular applications. Upon examining the recommended configuration files, I noticed that the required settings were already in place. However, there was a mention of updating a `server.js` file, which led me to believe it corresponds to the `main.ts` file in Angular projects. Nonetheless, I was unsure whether modifications should be made to the `main.ts` file in my Nest app or the one in my Angular app, considering I am using a `nrwl nx` monorepo for both apps.
This is the content of my Angular app's `proxy.conf.json` file:
{
"/cre8or-maker-backend": {
"target": "http://localhost:3333",
"secure": false,
"logLevel": "debug"
}
}
Furthermore, this snippet represents the `serve` object within the `architect` object in my `angular.json` file:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "cre8or-maker:build",
"proxyConfig": "apps/cre8or-maker/proxy.conf.json"
}
The aforementioned configurations had already been implemented in my project, leaving me puzzled about the directive to modify the `server.js` file (potentially analogous to Angular's `main.ts`). Here are the contents of my `main.ts` files:
nest main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app/app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
const globalPrefix = 'api';
app.setGlobalPrefix(globalPrefix);
const port = process.env.port || 3333;
await app.listen(port, () => {
console.log('Listening at http://localhost:' + port + '/' + globalPrefix);
});
}
bootstrap();
angular main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
Despite having installed the `cors` npm package, I remain uncertain about the additional steps needed to resolve the issue. Any assistance would be greatly appreciated.
UPDATE A couple of attempted fixes involved adding `app.enableCors();` and modifying the `create(AppModule)` function in my NestJs app's `main.ts` file with `{cors: true}`, which did not provide a solution. Additionally, incorporating the following code snippet yielded no success:
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
next();
});
As of now, I have defined one state that makes an API request to the backend. Inside this state, an action is structured like so:
@Action(GetProductIndexList)
getProductIndexListData({patchState, dispatch, getState}: StateContext<ProductIndexListModel>){
return this.dataService.fetchProductIndexList().pipe(tap((result)=>{
const state = getState();
patchState({items:[...state.items, ...result]});
}));
}
The API call is initiated within a service named `dataService`, configured within the state's constructor. Below is the structure of the service file:
@Injectable({ providedIn: 'root' })
export class ProductIndexService{
constructor(private httpClient: HttpClient){}
private readonly URL: string = 'localhost:3333/api';
public fetchProductIndexList():Observable<CattegoryIndexItem[]>{
const path: string = this.URL + '/product-index';
return this.httpClient.get(path) as Observable<CattegoryIndexItem[]>;
}
}
While the controllers in my NestJS setup work seamlessly, indicating proper setup, I am still encountering issues related to the CORS error. Should further details regarding my NestJS setup prove beneficial, kindly notify me and I will update this query with the relevant code snippets.