Nodejs允许跨源问题

Question

我有一个客户端应用程序连接到 node.js 中的服务器应用程序，我已经在设置路由之前设置了允许来源，但它仍然给我带来了跨域问题。

所以我有一个调用服务的角度应用程序像这样：

app.service

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
// import * as config from '../../../../config.json';

@Injectable()
export class PDFService {
  constructor (private http: Http) {}
  generatePDF() {
    return this.http.get("localhost:8000/pdfURL")
    .map((res:Response) => res.json());
  }
}

app.component

import { Component } from '@angular/core';
import { PDFService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private pdfService: PDFService) {
  }

  generatePDF() {
    this.pdfService.generatePDF().subscribe(
      (response) => {
        console.log("pdf generated");
      },
      (error) => {
        console.log("something went wrong on generating pdf");
      }
    );
  }
}

通过单击一个简单的按钮调用上述函数。

在服务器端，我的 app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var router = express.Router();
var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

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();
});

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

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

允许源之后的app.use调用路由初始化：

var express = require('express');
var router = express.Router();

router.use('/',require('./pdfGenerator'))

router.use(function(req,res,next){
    return res.status(404).json({Error:"Invalid Url"});
})

module.exports = router;

最后我调用了 pdfGenerator 路由器：

var express = require('express');
var router = express.Router();
var pdfGenerator = require('../controllers/pdfGenerator');

router.get('/pdfURL', pdfGenerator.pdfToUrl);

module.exports = router;

调用控制器：

var express = require('express');
var router = express.Router();
var fs = require('fs');
var pdf = require('html-pdf');
//var html = fs.readFileSync('./test/businesscard.html', 'utf8');
var options = { format: 'Letter' };


module.exports = {
    pdfToUrl: function(req,res,next) {
        console.log("adas");
        pdf.create('<div style="background-color:blue">a simple text</div>', options).toFile('./businesscard.pdf', function(err, res) {
            console.log("asd"); // { filename: '/app/businesscard.pdf' }    
            if (err) return console.log(err);
            console.log("asd"); // { filename: '/app/businesscard.pdf' } 
          });
    }
};

我用邮递员试过，效果很好，有什么提示吗？

Answer 1

尝试安装 Cors：https://www.npmjs.com/package/cors 并像这样使用它：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

您当然也可以使用插件。例如在 chrome 中：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

希望这会有所帮助；）