为什么我无法从 localhost 客户端连接到 localhost 服务器cors 错误？

问题描述

我有一个在端口 4200 (http://localhost:4200) 上运行的本地 (Angular) 客户端和一个在端口 5000 (http://localhost:5000) 上运行的本地（快速）服务器。每当我尝试连接到我的服务器时，我都会收到此消息。

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NU7H' from origin 
'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是启动本地服务器的代码

@injectable()
export default class App {
  app: express.Application;

  constructor() {
    this.app = express();
    this.config();
    this.bindRoutes();
  }

  // Middlewares config
  private config(): void {
    this.app.use(cors());
    this.app.use(express.json());
    this.app.use(express.urlencoded({ extended: true }));
  }

  bindRoutes(): void {
    this.app.use('/',router);
  }
}

这是我设置套接字的代码

private _ioServer: SocketIO.Server;

initSocket(server: http.Server) {
    this._ioServer = new SocketIO.Server(server);

    this.connectChat(); // Chat namespace
    this.connectStream(); // Game board streaming namespace
}

我尝试过 Postman，一切正常。

谢谢！

解决方法

任何恶意站点都可以利用您存储在名为 Cross-site request forgery

的系统中的 cookie

任何浏览器都试图阻止您免受这些攻击，因此它们会禁用 CORS。

Shorthand Fix [不推荐]：有许多插件可用于本地测试，可以禁用浏览器上的这些检查。

正确修复：当响应从服务器返回时，使用 Express 中间件在标头中应用 Access-Control-Allow-Origin: *。

要点是，当浏览器向您的服务器发送请求时，它会将 Origin: http://localhost:3000 附加到标头。响应来自浏览器的这个请求，服务器应该返回一个 Access-Control-Allow-Origin 标头来指定哪些源可以访问服务器的资源。

您可以在此处严格返回 Access-Control-Allow-Origin: http://localhost:4200 或通过发送 Access-Control-Allow-Origin: * 打开大门。

以下是快速生成中间件的代码：

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

const app = express();

app.use((req,res,next) => {
  res.header('Access-Control-Allow-Origin','*');
  next();
});

app.get('/jokes/random',(req,res) => {
  request(
    { url: 'https://joke-api-strict-cors.appspot.com/jokes/random' },(error,response,body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).json({ type: 'error',message: err.message });
      }

      res.json(JSON.parse(body));
    }
  )
});

const PORT = process.env.PORT || 3000;
app.listen(PORT,() => console.log(`listening on ${PORT}`));

来源： https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

P.S，this 是一本非常适合您理解 CORS 的读物。