如何修复CORS的“Access-Control-Allow-Origin”错误？

9 浏览
0 Comments

如何修复CORS的“Access-Control-Allow-Origin”错误？

我试图向我的Express服务器发送一个POST请求，但它总是抛出以下错误：\n由于CORS策略的限制，无法从源\'http://localhost:3000\'访问\'http://localhost:4000/users/sign-up\'。预检请求的响应未通过访问控制检查：所请求的资源上没有\'Access-Control-Allow-Origin\'头。如果不需要透明响应，请将请求的模式设置为\'no-cors\'以禁用CORS获取资源。\n以下是我如何设置我的服务器（使用TypeScript）：\n

import express, { Application } from 'express';
import * as dotenv from 'dotenv';
import { databaseConnect, serverConnect } from './modules/connections';
import bodyParser from 'body-parser';
import cors from 'cors';
import devicesRouter from './routes/dashboard';
import usersRouter from './routes/users';
import announcementsRouter from './routes/announcements';
import ordersRouter from './routes/orders';
// 初始化express
const app: Application = express();
// 服务器配置
dotenv.config();
await databaseConnect();
app.use(express.json());
app.use(bodyParser.json());
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
// 定义服务器路由
app.use('/devices', devicesRouter);
app.use('/users', usersRouter);
app.use('/announcements', announcementsRouter);
app.use('/orders', ordersRouter);
// 连接服务器
serverConnect();

\n在我的客户端中，我使用fetch API发送POST请求：\n

const response = await fetch("http://localhost:4000/users/sign-up", {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "http://localhost:3000"
  },
  body: JSON.stringify(signUpData)
});

\n我看过很多关于安装cors包来解决这个错误的视频，但不知何故对我并没有起作用。\n我尝试重新安装cors和@types/cors包，但没有任何变化。\n我还尝试使用以下代码替代：\n

app.use(cors({ origin: "http://192.168.1.3:3000", credentials: true }));

\n而不是：\n

app.use(cors({ origin: "http://localhost:3000", credentials: true }));

\n但它也没有起作用。

0

2 答案

0 Comments

CORS（Cross-Origin Resource Sharing）错误指的是在进行跨域资源访问时出现的问题。当客户端从一个域名的网页去请求另一个域名的资源时，如果两个域名不一致，就会触发CORS错误。

解决CORS错误的常见方法是在服务器端设置响应头部信息，指定允许访问的源（origin）。根据提供的代码片段，可以使用express的cors中间件来解决这个问题。

具体做法如下：

1. 首先，引入express和cors中间件：

const express = require('express');
const cors = require('cors');

2. 创建一个express实例：

const app = express();

3. 使用cors中间件，并设置允许访问的源为'*'（或者你的源地址，例如'http://localhost:9000'）：

app.use(cors({
  origin: '*'
}));

以上代码将允许任何源进行跨域访问。如果你只想允许特定的源进行访问，可以将origin的值设为对应的源地址。

通过以上步骤设置了cors中间件后，服务器会在响应头部信息中添加'Access-Control-Allow-Origin'字段，指定允许访问的源。这样就解决了CORS错误。

希望以上解决方法能够帮助到你解决CORS 'Access-Control-Allow-Origin'错误。如果之前尝试过这种方法但没有生效，可能是由于其他原因导致的。

0
0 Comments

问题出现的原因是在serverConnect()函数中创建了一个新的express实例，这是导致错误的原因。解决方法是将express实例作为参数传递给serverConnect()函数。

具体代码如下：

export function serverConnect(app: Application) {
    try {
        app.listen(4000, () => console.log("  服务器成功连接"));
    } catch (error) {
        console.error("  启动服务器时出错\n", error);
    }
}

非常感谢大家的贡献，从一开始就是我的错误。

0