使用 angular 9 部署在 heroku 上的 nodejs 应用程序中出现 CORS 错误

Question

Server.js 代码：

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

const db = require('./DB/db');
const routes = require('./api/routes/routes');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(cors({
    origin: '*'
}));

routes(app);

app.listen(PORT, () => {
    console.log(`Server started at ${PORT}`);
});

package.json 文件：

{
  "name": "LMS_Backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "joi": "^14.3.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.9.11",
    "nodemailer": "^6.4.6"
  }
}

Angular服务文件：

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

const baseUrl = 'https://lmspreject-1.herokuapp.com/api/lms_project';
// const baseUrl = 'http://localhost:3000/api/lms_project';

@Injectable({
  providedIn: 'root',
})
export class AdminServiceService {
  constructor(private http: HttpClient) {}

  register(adminDetails) {
    console.log(adminDetails);
    let headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    });
    let options = {
      headers: headers,
    };

    return this.http.post(`${baseUrl}/admin/register`, adminDetails, options);
  }
}

错误：

Access to XMLHttpRequest at ' https://lmspreject-1.herokuapp.com/api/lms_project/admin/register ' from origin ' http://localhost:4200 ' has been blocked by CORS policy: No 'Access-Control-Allow -Origin' header 存在于请求的资源上。

注意：它工作正常我在本地主机上运行应用程序，但在 Heroku URL 上出现错误。

Answer 1

跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头来告诉浏览器让 web 应用程序在一个来源运行，访问来自不同来源的选定资源。

您可以从 HTTPS 域向另一个 HTTPS 域发出 CORS 请求。 如果您执行 http 请求来调用您的 https 服务器，则它被认为是不安全的，并被视为使用篡改数据向您的服务器发出强制请求。

在这里，我可以看到您正在尝试从本地 http 访问 https 服务器，这就是您遇到 CORS 问题的原因。

Answer 2

关于 CORS，localhost 的行为与远程来源完全不同，这可能会非常令人困惑。

我怀疑您没有启用 CORS 飞行前 OPTIONS 端点。 您的请求使用的是 JOSN 内容类型，因此不是“简单”的 cors 请求。 它将自动在浏览器发出 OPTION 预检请求之前。 您的服务器应该能够响应该请求。

请参阅此处如何启用它 - https://www.npmjs.com/package/cors#enabling-cors-pre-flight

Answer 3

做：

npm i --save cors

在server.js文件中添加app.use(cors()) 。