javascript 来源'http://127.“0.0.1:5174”已被CORS策略阻止:

9gm1akwq  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(182)
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策略错误

4nkexdtk

4nkexdtk1#

这个cors配置应该可以:

app.use(
  cors({
    origin: ["http://127.0.0.1:5174"],
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true,
  })
);

错误消息告诉您这是您的原点。

如需进一步了解:

在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中。

  • 为了简单起见,我使用localhost地址,这个 * 是开发服务器的地址,但是对于托管服务器,地址当然是https://mern-todoapp-bc0e.onrender.com

相关问题