Cors Error While Using Nest.Js And Server Side Rendered Angular Universal App Cập Nhật Mới

CORS (Cross-Origin Resource Sharing) errors occur when a web application running on one domain tries to access a resource (such as an API endpoint) on another domain. By default, browsers prevent such cross-domain requests to prevent malicious behavior. However, in some cases, it may be necessary to access resources on another domain, such as when building a web application with Angular that accesses an API hosted on a different server.

To fix CORS errors in Angular 13, you can take the following steps:

1. Configure CORS on the server-side: If you have control over the server-side of the API, you can configure CORS to allow requests from the domain where your Angular app is hosted. This can usually be done by setting appropriate headers in the server response. For example, you can set the Access-Control-Allow-Origin header to the domain where your Angular app is hosted.

2. Use a proxy server: You can set up a proxy server to forward requests from your Angular app to the API server. This way, the browser makes requests to the same domain as the Angular app, and the proxy server forwards the requests to the API server. You can use the proxyConfig option in the angular.json file to configure a proxy server.

Here’s an example of how to set up a proxy server in Angular 13:

In your angular.json file, add a proxyConfig option under projects > [project-name] > architect > serve > options, like this:

json
{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "options": {
            "browserTarget": "my-app:build",
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}

Create a proxy.conf.json file in your app’s src directory, and add the following code:

json
{
  "/api/*": {
    "target": "https://api.example.com",
    "secure": true,
    "changeOrigin": true
  }
}

This configuration tells the Angular CLI to forward all requests to /api/* to https://api.example.com. The secure option tells the CLI to use HTTPS for the proxy request, and the changeOrigin option tells the CLI to change the origin of the request to match the target server.

1. Use a JSONP request: JSONP (JSON with Padding) is a technique that allows a web application to request data from a different domain by adding a <script> tag to the page that loads the data. The response is wrapped in a function call, which is executed when the script is loaded. Angular provides a Jsonp service that can be used to make JSONP requests.

Here’s an example of how to use the Jsonp service in Angular 13:

typescript
import { Injectable } from '@angular/core';
import { Jsonp } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ApiService {
  constructor(private jsonp: Jsonp) {}

  getData(): Observable<any> {
    return this.jsonp.get('https://api.example.com/data?callback=JSONP_CALLBACK')
      .map(response => response.json())
      .catch(error => Observable.throw(error));
  }
}

This code creates an ApiService that uses the Jsonp service to make a request to https://api.example.com/data with a callback parameter. The response is mapped to JSON using the json() method, and any errors are caught and re-thrown as an Observable error.

Note that JSONP requests are only suitable for simple GET requests, and they are not secure