CORS问题 - 响应中“Access-Control-Allow-Origin”标头的值不能是通配符'*'

Question

我有问题要发出一个帖子请求，以便将文件从angular上传到nodejs中的服务器。

当我在邮递员中测试它时，这个方法在nodejs中的服务器很好，所以我认为问题出在客户端的cors中。我不知道是否需要在express.cors中进行特殊配置？

服务器端

server.js

require('./config/config');

const express = require('express');
const mongoose = require('mongoose');
var cors = require('cors');


const app = express();
app.use(cors())
const bodyParser = require('body-parser');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));


// parse application/json
app.use(bodyParser.json())




app.use(require('./routes/index'));

mongoose.connect('mongodb://localhost:27017/colegios', (err, res) => {
    if (err) throw err;

    console.log('BDD Conectada exitosamente!!!');
});

app.listen(process.env.PORT, () => {
    console.log('Escuchando puerto: ', process.env.PORT);
});

autenticado.component.ts

import { Component, OnInit } from '@angular/core';
import { FileSelectDirective, FileUploader } from 'ng2-file-upload';



import { UsuarioService } from '../services/usuario.service';

import { CarreraService } from '../services/carrera.service';

import { Carrera } from '../models/carrera.model';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

const uri = 'http://localhost:3000/upload3/';

@Component({
  selector: 'app-autenticado',
  templateUrl: './autenticado.component.html',
  styleUrls: ['./autenticado.component.css']
})
export class AutenticadoComponent implements OnInit {


  public title: string;
  public identity;
  carreras: Carrera[] = [];
  attachmentList: any = [];

  uploader: FileUploader;

  constructor(public usuarioServ: UsuarioService, public carreraServ: CarreraService, public http: HttpClient) {
    this.identity = usuarioServ.getIdentity();

    this.uploader = new FileUploader({ url: uri + this.identity._id });
    console.log(uri + this.identity._id);

    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      console.log(response);
      this.attachmentList.push(response);
    };
  }


  ngOnInit() {
    this.title = 'Te has logueado exitosamente!';
    /* this.obtenerCarreras();
    console.log(this.carreras); */

  }


  obtenerCarreras() {
    try {
      const getCarreras = this.carreraServ.getCarreras();

      getCarreras.subscribe((resp: any) => {
        console.log(resp);
        for (let index = 0; index < resp.length; index++) {
          this.carreras[index] = resp[index];
        }
      });

    } catch (error) {
      console.log(error);
    }
  }


}

autenticado.component.html

<div class="navigation col-lg-12">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#" class="navbar-brand"> {{ title }} </a>
      </div>

      <ul class="nav navbar navbar-nav navbar-right">

        <li>
          <a [routerLink]="['/login']" [routerLinkActive]="['active']"> Login </a>
          <span class="glyphicon glyphicon-log-in"> </span>
        </li>

      </ul>


      <!-- 
        =========================================================
        Panel de Alumno solicitante de citas
        =========================================================
       -->

      <ul class="nav navbar-nav" *ngIf="identity.role === 'ALUMNO_ROLE'">

        <li>
          <span class="glyphicon glyphicon-home"> </span>
          <a [routerLink]="['/home']" [routerLinkActive]="['active']"> Inicio </a>
        </li>

      </ul>


      <div class="container-fluid">
        <div class="row header-section">
          <span>Selecciona la carrera a la que haras la solicitud</span>
        </div>

        <div class="row">

          <div id="seccioncarreras">
            <select id="carreras">
              <option value=""></option>
              <option *ngFor="let carrera of carreras" [value]="carrera._id"> {{ carrera.nombre }} </option>
            </select>
          </div>

          <div class="col-md-2"></div>
          <div class="col-md-8">

            <div class="row card">

              <div class="col-sm-12">
                <h4>Upload Section</h4>

                <div id="fileSelector">
                  <input type="file" name="fileUpload" id="fileUpload" ng2FileSelect [uploader]="uploader">
                </div>
                <div>
                  <div class="row uploadList" *ngFor="let item of uploader.queue">
                    <div class="col-sm-4">
                      {{ item.file.name }}
                    </div>
                    <div class="col-sm-4">
                      <div class="progress">
                        <div class="progress-bar bg-success" [ngStyle]="{'width':item.progress+'%'}"></div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <button type="button" class="btn btn-dark" (click)="item.upload()">Upload</button>
                      <button type="button" class="btn btn-danger">Cancel</button>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <button type="button" class="btn btn-primary">Upload All</button>
                </div>
              </div>
            </div>

          </div>
          <div class="col-md-2"></div>
        </div>
      </div>

      <!-- 
        =========================================================
        Panel de administrador del colegio
        =========================================================
       -->

      <ul class="nav navbar-nav" *ngIf="identity.role === 'ADMIN_ROLE'">

        <li>
          <span class="glyphicon glyphicon-home"> </span>
          <a [routerLink]="['/home']" [routerLinkActive]="['active']"> Inicio Maestro </a>
        </li>

        <li>
          <a [routerLink]="['/registrar']" [routerLinkActive]="['active']"> otro </a>
          <span class="glyphicon glyphicon-user"> </span>
        </li>

        <li>
          <a [routerLink]="['/registro-curso']" [routerLinkActive]="['active']"> Maestro </a>
          <span class="glyphicon glyphicon-plus"> </span>
        </li>

      </ul>



      <ul class="nav navbar navbar-right" *ngIf="identity">

        <li class="dropdown open">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            {{ identity.nombre }} <span class="caret"> </span> </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">
                <span class="glyphicon glyphicon-log-out"></span>
                Cerrar Sesion
              </a>
            </li>

          </ul>
        </li>

      </ul>

    </div>
  </nav>

</div>

Answer 1

你应该删除这个中间件：

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

因为我看到你添加了cors express中间件模块，它确实已经处理了Access-Control-Allow-Origin问题。如果需要任何自定义，您应该查看其文档。

Answer 2

如果请求包含任何授权，则Cors请求不能为Access-Control-Allow-Origin服务器'*'。

你必须回答当前的询问主机，所以localhost：4020在你的情况下。

如果你真的想允许*，那就回答一下吧

    res.header("Access-Control-Allow-Origin", req.headers['Host'] );

但无论如何，请不要同时使用express.cors和您自己的中间件。