是什么导致我的POST请求失败(带有Express / Angular的CORS)?

时间:2018-11-17 08:34:24

标签: node.js angular express cors

在这一点上,我觉得我已经尝试了所有可以想到的东西,并且已经搜索了。

CORS Not Succeeding, FireFox Quantum Console

我的代码的“纯”版本如下:

Server.js-Express

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./DB');
    businessRoute = require('../routes/business.route');


mongoose.Promise = global.Promise;
mongoose.connect(config.DB, { useNewUrlParser: true}).then(
    () => { console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err) }
);

const app = express();
app.use(bodyParser.json());
app.use(cors());
businessRoute.all('*', cors());
app.use('/business', businessRoute);


let port = process.env.PORT || 4000;

const server = app.listen(function(){
    console.log('Listening on port ' + port);
});

business.route.js-快速,连续

const express = require('express');
const app = express();
const businessRoutes = express.Router();

// Require Business model in our routes module
let Business = require('../models/Business');


// Defined store route
businessRoutes.route('/add').post(function(req, res) {
    let business = new Business(req.body);
    business.save()
        .then(business => {
            res.status(200).json({'business': 'business added successfully'});
        })
        .catch(err => {
            res.status(400).send("Unable to save to database");
        });
});

business.server.ts-角度

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BusinessService {
  uri = 'http://localhost:4000/business';

  constructor(private http: HttpClient) { }

  addBusiness(person_name, business_name, business_gst_number): void {
    const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
    };
    console.log(obj);
    this.http.post(`${this.uri}/add`, obj).subscribe(
      res => console.log('Done')
    );
  }
}

尝试过的内容

我尝试使用以下代码,在很多网站(包括SO)上都推荐使用以下代码:

app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

我尝试使用尝试的解决方案作为替换来删除代码的cors模块。我在快递路由器中使用了代码。我已经在server.js和router中结合使用了模块和代码,以及businessRoute.all('*', cors());

我必须要丢失一些东西。任何帮助表示赞赏。

根据要求,以下是来自Chrome的网络检查器信息:

Chrome Network Inspector

它确实给了我一个OPTIONS错误:

Options Failure

3 个答案:

答案 0 :(得分:1)

感谢大卫,我找到了问题。问题出在:

const server = app.listen(port, function(){
    console.log('Listening on port ' + port);
});

我在port中缺少app.listen()

感谢所有为您提供帮助的人。我倾向于删除问题,因为它根本与CORS无关,但是我收到了有关删除问题的警告。

社区要求

将问题编辑为“为什么Express会拒绝我的API请求?”这将是一个更准确的问题,但使先前发布的答案无关紧要。最重要的是,Ebin的答案是我所看到的有关CORS问题的所有答案所独有的,并且相信它可以帮助其他人。

基于这些原因,我将其留给社区,以及他们对问题的保留态度,以及他们是否有任何建议可以改善它以使其值得保留。

答案 1 :(得分:0)

我有一个相同的错误,然后我使用了

{{1}}

然后它起作用了,试试这个

答案 2 :(得分:0)

尝试从npm run serve中删除const app = express();business.route.js中的businessRoute.all('*', cors());

我也会先使用server.js