I Deployed a MERN application on Vercel, but you know requests must happen between client and API in order for website to functions, such as signup, login, etc. as an exmaple I've made a post route called get-employees:

我在Vercel上部署了一个MERN应用程序，但您知道，为了使网站能够运行，如注册、登录等，客户端和API之间必须发生请求。例如，我制作了一条名为Get-Employees的POST路线：

app.get("/get-employees", (req, res) => {
    employee.getEmployees(req, res);
});

This route when called just fetches some employees objects from the database and this is tested in the development stage. Of course I have made many other routes to serve my front end.

调用该路径时，它只是从数据库中获取一些Employees对象，并在开发阶段进行了测试。当然，我还做了很多其他的路线来服务于我的前端。

on the client side I would be calling these routes using fetch API, for example I made a route called /signup, in my signup.js react component, and this component need to of course call /signup route in order to be able to sign up users:

在客户端，我将使用Fetch API调用这些路由，例如，我在我的signup.js Reaction组件中创建了一个名为/signup的路由，该组件当然需要调用/注册路由才能注册用户：

const handleSignup = async (e) => {
    const user = {
        username: username.current.value,
        password: password.current.value,
    };
    await fetch("---/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(user),
    });
};

As you see here, I have deployed my API on Vercel and I also made a get route that says hello just to make sure its working. All that I'm doing is sending request to /signup in order to register users, but would it be that easy? Of course not, we have something called CORS.

正如您在这里看到的，我已经在Vercel上部署了我的API，并且我还创建了一个GET路由来打招呼，只是为了确保它能正常工作。我所做的就是向/Sign Up发送注册用户的请求，但这有那么简单吗？当然不是，我们有一种叫CORS的东西。

So I added this code to my index.js on server side in order to enable access from client:

因此，我在服务器端将此代码添加到我的index.js中，以便能够从客户端访问：

const corsOptions = {
    origin: '---',
    credentials: true,
}
app.use(cors(corsOptions))

But that didn't work as expected from CORS, so I tried a different way:

但CORS没有达到预期的效果，所以我尝试了一种不同的方式：

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // '*' allows any origin, you can restrict it to specific origins
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    next();
});

That didn't work either. I also tried enabling all origins and all methods and all headers but CORS refuses.

这也不管用。我还尝试启用所有来源、所有方法和所有标头，但CORS拒绝。

Here are the errors I get:

以下是我得到的错误：

/employees:1  Access to fetch at '---' from origin '---' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 
Failed to load resource: net::ERR_FAILED asyncToGenerator.js:6 
        
        
       
        
Uncaught (in promise) TypeError: Failed to fetch
at AuthContext.js:21:28
at d (regeneratorRuntime.js:44:17)
at Generator.<anonymous> (regeneratorRuntime.js:125:22)
at Generator.next (regeneratorRuntime.js:69:21)
at r (asyncToGenerator.js:3:20)
at s (asyncToGenerator.js:22:9)
at asyncToGenerator.js:27:7
at new Promise (<anonymous>)
at asyncToGenerator.js:19:12
at AuthContext.js:20:21

it looked like i needed to install an extension Allow CORS: Access-Control-Allow-Origin for Microsoft Edge as CORS is disabled by default

看起来我需要安装一个扩展Allow CORS：Access-Control-Allow-Origin for Microsoft Edge，因为默认情况下CORS是禁用的