为什么我无法从本地主机客户端连接到本地主机服务器(cors 错误)？

Question

我有一个本地(Angular)客户端运行在端口4200 (http://localhost:4200)和一个本地(express)服务器端口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
}

我用邮差试过了，一切正常。

谢谢!

Answer 1

任何恶意站点都可以利用您存储在系统中的cookie称为跨站点请求伪造

任何浏览器都试图阻止这些攻击，所以它们会禁用CORS。

简写修复[不推荐]:有很多插件可以用来在本地测试中禁用浏览器上的这些检查。

适当的解决办法:当响应从服务器返回时，使用Express中间件在头中应用Access-Control-Allow-Origin: *。

Gist是当浏览器发送请求到您的服务器时，它将附加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，这是一本很好的读物，可以帮助你理解CORS。

Answer 2

在你的中间件的index.js文件中添加:app.use(cors())