我在发出发布请求以将文件从angular上传到nodejs中的服务器时遇到问题。
当我在邮递员中对其进行测试时,该方法在nodejs中的服务器上可以使用,因此我认为问题出在客户端cors中。我不知道是否需要在express.cors中进行特殊配置?
Lado del servidor
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>
答案 0 :(得分:0)
您应该删除此中间件:
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表达中间件模块,并且它确实已经解决了Access-Control-Allow-Origin
问题。如果需要任何自定义,则应查看其文档。
答案 1 :(得分:0)
如果请求包含任何授权,Cors请求不能为Access-Control-Allow-Origin服务器提供“ *”。
您必须回答当前询问的主机,因此您的情况是localhost:4020。
如果您真的想允许*,只需回答
res.header("Access-Control-Allow-Origin", req.headers['Host'] );
但无论如何,请勿同时使用express.cors和您自己的中间件。