title: CORS is somehow stopping my Angular and Nestjs apps from communicating
body: <p>I'm building an app with Angular and NestJS using NGXS for state management.  I got everything set up and served my application and got this error in the console.</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at 'localhost:333/api/product-index' from origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.</p>
  </blockquote>
  
  <p>After doing a little research I found <a href="https://www.positronx.io/handle-cors-in-angular-with-proxy-configuration/" rel="nofollow noreferrer">this article</a> explaining how to handle CORS in our Angular apps and after checking the files it tells us to modify I saw that the settings were already present.  I was confused about the <code>server.js</code> file it told us to update and after looking into what's typically done in a <code>server.js</code> file I came to the conclusion that in Angular it must be the <code>main.ts</code> file however I don't know if I need to make the modifications to the <code>main.ts</code> file in my Nest app or the one in my Angular app.  I'm using a <code>nrwl nx</code> monorepo for my apps as well.</p>
  
  <p>This is the <code>proxy.conf.json</code> file from my angular app</p>
  
  <pre><code>{
      "/cre8or-maker-backend": {
        "target": "http://localhost:3333",
        "secure": false,
        "logLevel": "debug"
      }
    }
  </code></pre>
  
  <p>This is the <code>serve</code> object of the <code>architect</code> object in my <code>angular.json</code> file.</p>
  
  <pre><code>"serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "cre8or-maker:build",
              "proxyConfig": "apps/cre8or-maker/proxy.conf.json"
            }
  </code></pre>
  
  <p>As I said before these settings were already present in these files and the only thing that seems new to me is the part about modifying the <code>server.js</code> file which I'm assuming is the <code>main.ts</code> file in Angular world.  Here's what my <code>main.ts</code> files look like</p>
  
  <p><code>nest main.ts</code></p>
  
  <pre><code>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, () =&gt; {
      console.log('Listening at http://localhost:' + port + '/' + globalPrefix);
    });
  }
  
  bootstrap();
  </code></pre>
  
  <p><code>angular main.ts</code></p>
  
  <pre><code>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 =&gt; console.error(err));
  </code></pre>
  
  <p>I installed the <code>cors</code> npm package already, I just don't know what else I'm suppose to do to get this working, can anyone help?</p>
  
  <p><strong><em>UPDATE</em></strong>
  I tried adding <code>app.enableCors();</code> to the <code>main.ts</code> file in my NestJs app as well as modifying the <code>create(AppModule)</code> function to be <code>create(AppModule, {cors: true})</code> and neither solve the problem.  I also added the following snippet of code which didn't help either.</p>
  
  <pre><code>app.use((req, res, next) =&gt; {
      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();
    });
  </code></pre>
  
  <p>As of right now I only have one state defined making an API request to the back end.  Inside my state I have an action which looks like this</p>
  
  <pre><code>@Action(GetProductIndexList)
      getProductIndexListData({patchState, dispatch, getState}: StateContext&lt;ProductIndexListModel&gt;){
  
         return this.dataService.fetchProductIndexList().pipe(tap((result)=&gt;{
              const state = getState();
  
              patchState({items:[...state.items, ...result]});
          }));
      }
  </code></pre>
  
  <p>I make the api call inside of a service file which I'm calling <code>dataService</code> in the state's constructor.  The service file looks like this.</p>
  
  <pre><code>@Injectable({ providedIn: 'root' })
  
  export class ProductIndexService{
  
      constructor(private httpClient: HttpClient){}
  
      private readonly URL: string = 'localhost:3333/api';
  
      public fetchProductIndexList():Observable&lt;CattegoryIndexItem[]&gt;{
          const path: string = this.URL + '/product-index';
  
          return this.httpClient.get(path) as Observable&lt;CattegoryIndexItem[]&gt;;
      }
  }
  </code></pre>
  
  <p>In NestJS I can successfully call the data without any errors so I know the controllers are set up properly but if anybody wants to see how I have things set up there let me know and I'll update this question with the code.</p>