Node.js 访问控制允许原点的CORS错误*-节点和角度

我正在使用Angular开发一个web应用程序，当我将后端与前端连接时，会出现CORS错误：

访问位于的XMLHttpRequest'http://localhost:3700/api/save-“源于”项目http://localhost:4200'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：它没有HTTP ok状态。

我知道CORS是什么，但我不知道为什么会出现这个错误，因为在后端的app.js中，我有阻止CORS的代码

如何解决此问题

代码：

app.js “严格使用”

var express = require('express');
var bodyParser = require('body-parser');

var app = express();

// cargar archivo Rutas
var routes = require('./routes/product');

// Middlewares
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json()); // Content-Type: image/jpg

// Configurar cabeceras y cors
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});

// Rutas
app.use('/api', routes);

// exportar
module.exports = app;

以角度表示的组件：

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/products.service';
import { Product } from 'src/app/models/product';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'crear',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css'],
  providers: [HttpClient, ProductService]
})
export class CreateComponent implements OnInit {
  public producto: Product;
  public product: any;

   constructor(
    //,
    //private http: HttpClient
    private _productService: ProductService
  ) { 
    this.producto = new Product('','','','',2,2);
  }

  ngOnInit(): void {
  }

  onSubmit(form){
    this._productService.saveProduct(this.producto).subscribe(
      response => {
        if(response.producto){

          form.reset();

          this.product = this.producto._id;
        }else{
        alert("No se ha podido");
      };
      } 
    )
  }

}

服务：

import { Injectable } from "@angular/core";
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Product } from '../models/product';
import { Global } from './global.service';

@Injectable()
export class ProductService{
    public url: String;

    constructor(
        private _http: HttpClient
    ){
        this.url = Global.url;
    }

    saveProduct(product: Product): Observable<any>{
        var params = JSON.stringify(product);
        let headers =  new HttpHeaders().set('Content-Type', 'application/json');

        return this._http.post(this.url+'save-project', params, {headers: headers});
    }
}

从“@angular/core”导入{Injectable}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“../models/Product”导入{Product}；
从“/Global.service”导入{Global}；
@可注射（）
出口类产品服务{
公共url:String；
建造师(
私有http:HttpClient
){
this.url=Global.url；
}
保存产品（产品：产品）：可观察{
var params=JSON.stringify（产品）；
let headers=new-HttpHeaders（）.set（'Content-Type'，'application/json'）；
返回此.u http.post（this.url+'save-project'，params，{headers:headers}）；
}
}

---

感谢您在后端项目中安装cors中间件：

npm install cors --save

然后，在app.js中，导入cors包并使用它：

var cors = require('cors');

var app = express();

app.use(cors());

在任何路由声明之前应用cors中间件非常重要。

有关cors中间件的更多信息：

有关cors的更多信息：

您可以使用cors（）来处理cors设置。请遵循文档中的用法。

---

如果您不想启用cors源代码，并且只需要为本地开发工作，您可以尝试使用--disable web security模式启动chrome。

在app.js中设置cors标头后尝试添加这些If语句 （我在graphQL中需要它，希望它能工作！）

---

使用Express CORS PackageHank，但加载资源时出现其他错误

失败：net:：ERR\u CONNECTION\u被拒绝

if (req.method === "OPTIONS") {
    res.send(200);
  }

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
  if (req.method === "OPTIONS") {
    res.send(200);
  }
    next();
});