我已經為學校的一個專案在 heroku 上部署了一個 angular 應用程式（前端和后端在多個 heroku 應用程式中分開），但我遇到了 CORS 預檢請求的問題。
每次我向后端發送請求時，我都會收到以下錯誤
Access to XMLHttpRequest at 'https://playlist-manager-backend.herokuapp.com/user/authenticate' from origin 'https://playlist-manager-admin.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
這是我的 server.js 的代碼推送到后端應用程式 (playlist-manager-backend)
const express = require("express");
const { connect: dbconnect } = require("./src/db");
const { apiPort } = require("./src/config");
const routes = require("./src/routes");
const bodyParser = require("body-parser");
// Connect to the database
dbconnect();
// Create the server
const app = express();
// const cookieParser = require("cookie-parser");
// app.use(cookieParser());
app.use(bodyParser.json({ limit: "5mb" }));
// app.get("/", (req, res) => res.send("Hello World"));
const cors = require("cors");
/*let whitelist = ["https://playlist-manager-admin.herokuapp.com/","https://playlist- manager-user.herokuapp.com/"];*/
const corsOptions = {
origin: ["https://playlist-manager-admin.herokuapp.com/", "https://playlist-manager-user.herokuapp.com/"],
preflightContinue:false,
credentials: true
}
app.use(cors(corsOptions));
app.use("/", routes);
app.use(express.static("./adverts"));
app.listen(apiPort, () => {
console.log(`Server is listening on port ${apiPort}`);
});
后端函式的路由是使用 routers 在 routes.js 檔案中定義的，如下所示。
const express = require("express");
const router = express.Router();
const userRoute = require("../user/user.route");
const playlistRoute = require("../playlist/playlist.route");
const videoRoute = require("../video/video.route");
const annonceUploadRoute = require("../annoncesUpload/annoncesUpload.route");
const historyRoute = require("../history/history.route");
const advertiserRoute = require("../advertiser/advertiser.route");
router.use("/user", userRoute);
router.use("/playlist", playlistRoute);
router.use("/video", videoRoute);
router.use("/annoncesUpload", annonceUploadRoute);
router.use("/history", historyRoute);
router.use("/annonceur", advertiserRoute);
module.exports = router;
以下是如何實作路由的示例：
router.post("/getById", async function(req, res) {
const request = {
_id: req.body._id,
};
const result = await bo.getById(request);
res.send(result);
});
前端使用這樣實作的服務向后端發送發布請求：
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
export interface BackendData {
success: string ;
data: any ;
}
@Injectable({
providedIn: 'root'
})
export class MessageService {
constructor(private http:HttpClient) { }
sendMessage(Url:string, data:any): Observable<BackendData> {
const serveur = environment.server Url ;
return this.http.post<BackendData>(
serveur,
data,
{withCredentials: true}
);
}
}
我嘗試了在網上看到的所有解決方案，但總是遇到相同的錯誤或與 CORS 策略相關的另一個錯誤。我需要幫助找出這種行為。當我在檔案中使用 cors 包指定 localhost 時，該應用程式在本地運行良好。
Edit : I removed slashes on the URL's and my server.js is like this :
const express = require("express");
const { connect: dbconnect } = require("./src/db");
const { apiPort } = require("./src/config");
const routes = require("./src/routes");
const bodyParser = require("body-parser");
// Connect to the database
dbconnect();
// Create the server
const app = express();
// const cookieParser = require("cookie-parser");
// app.use(cookieParser());
app.use(bodyParser.json({ limit: "5mb" }));
// app.get("/", (req, res) => res.send("Hello World"));
const cors = require("cors");
/*let whitelist = ["https://playlist-manager-admin.herokuapp.com/", "https://playlist-manager-user.herokuapp.com/"];*/
const corsOptions = {
origin: ["https://playlist-manager-admin.herokuapp.com", "https://playlist-manager-user.herokuapp.com"],
credentials: true
}
app.use(cors(corsOptions));
app.use("/", routes);
app.use(express.static("./adverts"));
app.listen(apiPort, () => {
console.log(`Server is listening on port ${apiPort}`);
});
This is the network tab after sending the request
This is the xhr request shown in the network tab
This is the preflight request in the network tab
uj5u.com熱心網友回復：
感謝 jubObs 的評論，我設法解決了這個問題。問題的根源是后端服務器沒有啟動，這導致了 503 狀態。我忘記添加定義資料庫連接憑據的檔案，這導致后端在添加標頭之前失敗。
這是新的 server.js 代碼：
const express = require("express");
const { connect: dbconnect } = require("./src/db");
const { apiPort } = require("./src/config");
const routes = require("./src/routes");
const bodyParser = require("body-parser");
// Connect to the database
dbconnect();
// Create the server
const app = express();
// const cookieParser = require("cookie-parser");
// app.use(cookieParser());
app.use(bodyParser.json({ limit: "5mb" }));
// app.get("/", (req, res) => res.send("Hello World"));
const cors = require("cors");
/*let whitelist = ["https://playlist-manager-admin.herokuapp.com/", "https://playlist-manager-user.herokuapp.com/"];*/
const corsOptions = {
origin: ["https://playlist-manager-admin.herokuapp.com", "https://playlist-manager-user.herokuapp.com"],
credentials: true
}
app.use(cors(corsOptions));
app.use("/", routes);
app.use(express.static("./adverts"));
app.listen(apiPort, () => {
console.log(`Server is listening on port ${apiPort}`);
});
資料庫連接使用的是 dotenv 并且定義資料庫憑據的 .env 檔案不存在于主分支中，所以我推送了它。為了弄清楚這一點，我檢查了 heroku 上的應用程式日志，這些日志位于“更多”和“查看日志”中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/414164.html
標籤：