使用 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()) 。