CORS错误:同源策略不允许读取远程资源http://api.com(原因:CORS请求未成功).状态码(null).&

Question

Cross-Origin Request Blocked:同源策略不允许读取远程资源http://bayut-api-v1:4000/properties/list?purpose=for-sale&locationExternalIDs=5002&sort=city-level-score&location=dubai&page=1。(原因:CORS请求未成功)。状态码:(null).

我正在使用docker，我建立了"api";and "FrontEnd with nextjs"在一个自定义网络中对所有这些进行了Dockerized名为"bayut"使用Nginx作为反向代理，并使用Nginx *暴露80端口

流量来自端口80 ->端口3000，这是nextjs应用

当我从本地主机使用应用程序时，我得到一个cors错误但是当我试图在我的"bayut"中使用firefox docker图像时;网络一切正常

• API: http://bayut-api-v1:4000

• FrontEnd http://client-bayut:3000 ->当我在bayut网络中使用此域时没有错误

但是当我从bayut网络之外的localhost访问时，我得到一个cors错误一个可能的解决方案是使用https://nextjs.org/docs/api-reference/next.config.js/rewrites但是这个解决方案会暴露我的API我希望我的API是私有的

我将在服务器端添加我的索引页

import express from "express";
import { Request, Response, NextFunction, Application } from "express";
import { Server } from "http";
import createHttpError from "http-errors";
const Redis = require("ioredis");
const cors = require("cors");
const client = new Redis({
port: 6379,
host: "redis-bayut",
});
// const client = new Redis(6379, "172.17.0.3");
require("dotenv").config();
const app: Application = express();
const allowedOrigins = ["http://bayut-client:3000", "http://localhost:3000" ,"127.0.0.1:3000"];
app.use(cors({
origin: allowedOrigins,
methods: ["GET"],
}));
app.get("/", async (req: Request, res: Response) => {
res.send("Hello World3!🌏");
});
// Routes
app.use("/auto-complete", require("./routes/auto-complete"));
app.use("/properties", require("./routes/properties"));
app.use("/agencies", require("./routes/agencies"));
const acceptOnlyGetRequsets = (
req: Request,
_res: Response,
next: NextFunction
) => {
if (req.method !== "GET") {
return next(createHttpError(405, "Method Not Allowed"));
}
};
//  accept Only Get Requsets
app.use(acceptOnlyGetRequsets);
app.use((req: Request, res: Response, next: NextFunction) => {
next(new createHttpError.NotFound());
});
const errorHandler = (
err: any,
req: Request,
res: Response,
next: NextFunction
) => {
res.status(err.status || 500);
res.send({
message: err.message,
status: err.status,
});
};
app.use(errorHandler);
const PORT = process.env.PORT || 4000;
const server: Server = app.listen(PORT, () =>
console.log(`=>  http://localhost:${PORT}/
⌛ ${new Date().toLocaleTimeString("en-us", { timeStyle: "medium" })}
`)
);
export const redisClient = client;

Answer 1

跨域请求阻塞:同源策略不允许读取远程资源http://bayut-api-v1:4000/properties/list?purpose=for-sale&locationExternalIDs=5002&sort=city-level-score&location=dubai&page=1。(原因:CORS请求未成功)。状态码:(null).

这个错误意味着:

• 你正在发出跨域请求
• 请求完全失败
• 因为它是跨源的，它完全失败了，所以没有响应，所以没有响应头可以包含CORS权限，让你的JS访问该数据。

(我认为其他事情可能导致null状态，但考虑到你问题的其余部分，它的含义很清楚)。

简而言之:浏览器无法访问你给它的URL。

---

但是这个解决方案会暴露我的API，我希望我的API是私有的

如果你想让客户端JavaScript访问API，那么必须将API公开给浏览器。