时间戳

首页 > 解决方案 > 请求的资源上不存在“Access-Control-Allow-Origin”标头。CORS plicy 已阻止对 XMLHttpRequest 的访问

node.js - 请求的资源上不存在“Access-Control-Allow-Origin”标头。CORS plicy 已阻止对 XMLHttpRequest 的访问

问题描述

我正在使用 angular 和 nodejs 构建电子商务，当我尝试获取产品时出现此错误：**Access to XMLHttpRequest at 'http://localhost:3000/api/products?limit=10' from origin “http://localhost:4200”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。** 我已经安装了 cors 并在后端的 app.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

标签： node.jsangulartypescript

解决方案

你需要在你的应用程序中允许跨域，这意味着哪些网站可以与你的后端应用程序通信，在这个另一个网站将是前端，它位于 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。

推荐阅读