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

Posted 2023-03-04

【中文标题】使用angular 9部署在heroku上的nodejs应用程序中的CORS错误

【英文标题】：CORS error in nodejs app deployed on heroku using with angular 9

【发布时间】：2020-08-27 21:07:34

【问题描述】：

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

错误：

从源“http://localhost:4200”访问“https://lmspreject-1.herokuapp.com/api/lms_project/admin/register”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

注意：我在 localhost 上运行应用程序运行良好，但在 Heroku URL 上出现错误。

【参考方案1】：

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

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

在此处查看如何启用它 - https://www.npmjs.com/package/cors#enabling-cors-pre-flight

【参考方案2】：

做：

npm i --save cors

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

【参考方案3】：

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

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

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

【讨论】：

但我在不同的项目中使用了相同的东西，而且每次都运行良好。