API requests returning errors trying to access NestJS backend from Angular frontend

问题

When making an API call to my NestJS app I'm receiving the following errors.

core.js:6185 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://localhost:3333/api/product-index", ok: false, …}

and

GET https://localhost:3333/api/product-index net::ERR_SSL_PROTOCOL_ERROR

From looking into Nest, Angular and NGXS individually and the suggested ways to go about things I have everything set up properly. The only thing I could think to do was tinker with the references to localhost:3333/api to see if maybe I'm targeting a location that doesn't exist. I noticed when I change https to http I get a CORS error that doesn't go away even when including enableCors() in the main.ts file. I've watched and read a few tutorials connecting NestJS to Angular and once they get the files set up it just works. I've been reviewing the tutorial on nrwl's site and I have everything set up properly as far as I can see.

This is what the main.ts file looks like in my Nest app

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();

the serve data for my frontend project in the angular.json file looks like this

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "cre8or-maker:build",
    "proxyConfig": "apps/cre8or-maker/proxy.conf.json"
}

the proxy.conf.json file in my frontend project looks like this

{
    "/api": {
      "target": "https://localhost:3333",
      "secure": false,
      "logLevel": "debug"
    }
}

I have a service file in my NGXS module that makes a request to the product-index controller in the Nest App which looks like this

export class ProductIndexService{

    constructor(private httpClient: HttpClient){}

    private readonly URL: string = 'https://localhost:3333/api';




    public fetchProductIndexList():Observable<CattegoryIndexItem[]>{
        const path: string = this.URL + '/product-index';

        return this.httpClient.get(path) as Observable<CattegoryIndexItem[]>;
    }
}

My environments/environments.ts file

export const environment = {
  production: false,
  apiUrl: '/api'
};

My environments/environments.prod.ts file

export const environment = {
  production: true
};

As I mentioned before I tried things like adding and removing /api from the path and going back and forth between http and https and it just won't work. I can successfully call the product-index controller from localhost:3333 so I know everything is set up properly in Nest, from the paths shown in the error it looks like I'm targeting it properly from my NGXS state. What's the problem here? What am I missing or else should I look at?

回答1:

After digging around I came across an alternative method for enabling cors in our app which is to apply it to the create() function of the NestFactory in the main.ts file like this

const app = await NestFactory.create(AppModule, {cors: true});

This made the errors go away. I don't know why there's a difference between this and app.enableCors(). I'm using Angular 9.1 so maybe there's something under the hood with it preventing Nest from making the connection.

来源：https://stackoverflow.com/questions/60963983/api-requests-returning-errors-trying-to-access-nestjs-backend-from-angular-front

标签

angular

typescript

nestjs

ngxs

nrwl-nx