APP.js in backened
import express from "express";
import userRouter from "./routes/user.js";
import taskRouter from "./routes/task.js";
import { config } from "dotenv";
import cookieParser from "cookie-parser";
import { errorMiddleware } from "./middlewares/error.js";
import cors from "cors";
export const app = express();
config({
path: "./data/config.env",
});
// Using Middlewares
app.use(express.json());
app.use(cookieParser());
app.use(
cors({
// origin: ["http://127.0.0.1:5174/api/v1"],
origin: ["http://localhost:3000/api/v1"],
methods: ["GET", "POST", "PUT", "DELETE"],
credentials: true,
})
);
// Using routes
app.use("/api/v1/users", userRouter);
app.use("/api/v1/task", taskRouter);
app.get("/", (req, res) => {
res.send("Nice working");
});
// Using Error Middleware
app.use(errorMiddleware);
main.jsx from frontened
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles/app.scss";
import { createContext } from "react";
export const server = "https://mern-todoapp-bc0e.onrender.com/api/v1";
// export const server = "https://localhost:3000/api/v1";
export const Context = createContext({ isAuthenticated: false });
const AppWrapper = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [loading, setLoading] = useState(false);
const [user, setUser] = useState({});
return (
<Context.Provider
value={{
isAuthenticated,
setIsAuthenticated,
loading,
setLoading,
user,
setUser,
}}
>
<App />
</Context.Provider>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<AppWrapper />
</React.StrictMode>
);
在'https://mern-todoapp-bc 0 e访问XMLHttpRequest。onrender.com/api/v1/users/new' from origin ' http://127。“0.0.1:5174”已被CORS策略阻止:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。
为什么我得到这个错误,而登录和登录在我的网页,甚至我已经使用了所有的cors完美??
我已经在这个链接上部署了我的API“ www.example.com ”,并且其工作正常,但无法解决cors策略错误
1条答案
按热度按时间4nkexdtk1#
这个cors配置应该可以:
错误消息告诉您这是您的原点。
如需进一步了解:
在HTTP请求中,涉及两个实体:客户端和服务器。客户端是请求的“来源”,它将请求发送到服务器上的特定位置(或路径)。例如,地址可能是:
http://127.0.0.1:5174
客户端(源)http://localhost:3000
服务器 *在后端代码中,在cors选项的
origin
属性中提供的列表告诉Express服务器“允许来自这些源的请求”。您将
http://127.0.0.1:5174/api/v1
作为源代码,然后将其注解掉,大概是因为它不起作用。这是因为路径(/api/v1
)指的是服务器上的一个位置。请求看起来像这样:http://127.0.0.1:5174
==〉http://localhost:3000/api/v1
地址
http://127.0.0.1:5174/api/v1
没有任何意义。路径是服务器上的一个位置,而不是客户端上的位置,所以不应该将它添加到客户端url中。https://mern-todoapp-bc0e.onrender.com