На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Доступ к XMLHttpRequest был заблокирован CORS plicy

Question

Я создаю электронную торговлю в angular и nodejs и получаю эту ошибку, когда пытаюсь получить продукты: ** Доступ к XMLHttpRequest по адресу 'http://localhost: 3000 / api / products? Limit = 10 'from origin' http://localhost: 4200 'был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '. ** Я уже установил cors и использовал его в своем приложении. js файл в бэкэнде. Вот мой код:

export class HomeComponent implements OnInit {

  products: any[] = [];


  constructor(private productService: ProductService,
              private router: Router) {
  }

  ngOnInit(): void {
    this.productService.getAllProducts().subscribe((prods: { count: Number, products: any[] }) => {
      this.products = prods.products;
    });
  }

  selectProduct(id: Number) {
    this.router.navigate(['/product', id]).then();
  }
}

это был мой home.component.ts

export class ProductService {

  private SERVER_URL = environment.SERVER_URL;
  constructor(private http: HttpClient) { }

  /* This is to fetch all products from the backend server */
  getAllProducts(numberOfResults= 10) {
    return this.http.get(this.SERVER_URL + '/products', {
      params: {
        limit: numberOfResults.toString()
      }
    });
  }

}

и это был мой product.service.ts

Answer 1

вам необходимо разрешить Cross-origin в вашем приложении, то есть какие веб-сайты могут связываться с вашим серверным приложением, в этом случае другой веб-сайт будет внешним интерфейсом, который находится на localhost: 4200 вы можете разрешить это, набрав это в вашем Nodejs приложении

const express = require("express");
const app = express();
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
  res.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
  if (req.method == "OPTIONS") {
    return res.sendStatus(200);
  }
  next();
});

приведенный выше код устанавливает заголовки, как вы видите, чтобы разрешить CORS.