Socket.io和express应用由于CORS错误而无法连接:“'Access-Control-Allow-Origin'标头的值不得为通配符'*'" [英] Socket.io and express app not connecting due to CORS error: “The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*'”

问题描述

在我遇到一个非常愚蠢的问题时，我正在慢慢失去主意.

I'm slowly losing my mind over a very stupid issue I'm having.

我有一个socket.io/express应用程序作为Docker设置上传到Digital Ocean.

I have a socket.io/express app uploaded to Digital Ocean as a Docker setup.

要允许使用https，我将caddy用作Docker设置的一部分，以允许自动使用https.

To allow https, I am using caddy as part of my Docker setup to allow for automatic https.

我一直试图通过我的域以及本地主机上的本地React应用连接到此设置:3000.但我不断收到以下错误:

I've been trying to connect to this setup via my domain and from my local React app that lives on localhost:3000. But I am constantly getting the following error:

通过' https:/访问XMLHttpRequest/mediaserver.domain.dev/socket.io/?EIO=3&transport=polling&t=N5BXNK2 '源自来源" http://localhost:3000 "已被CORS策略阻止:请求的凭据模式下，响应中"Access-Control-Allow-Origin"标头的值不得为通配符"*"是包含".XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

Access to XMLHttpRequest at 'https://mediaserver.domain.dev/socket.io/?EIO=3&transport=polling&t=N5BXNK2' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

我知道以前对此有很多SO问题，当我说我尝试了几乎所有问题时都​​相信我.

I know there have been a lot of SO questions about this before and believe me when I say I tried almost all of them.

• 我尝试更改cors中间件的选项
• 我尝试添加自己的中间件并专门设置标头
• 我尝试使用localhost:3000作为来源
• ...

但是似乎没有任何效果.我目前不知道该如何解决.

But nothing seems to work. I have currently no idea what I can still do to fix this.

因此，欢迎您提供任何帮助.

So any help would be welcome.

我的docker-compose文件如下所示:

My docker-compose file looks as follows:

version: '3.6'
services:
  media-server:
    build:
      dockerfile: Dockerfile
      context: ./
    ports:
    - "8080:5000"
    expose: 
      - "5000"
  caddy:
    image: abiosoft/caddy:0.11.0
    depends_on:
      - "media-server"
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /root/Caddyfile:/etc/Caddyfile
      - /root/.caddy:/root/.caddy

我的Caddyfile如下:

My Caddyfile is as follows:

https://mediaserver.domain.dev {
  proxy / http://media-server:8080 {
    websocket
    transparent
  }
  cors
}

我的服务器设置如下:

import cors from 'cors';
import express from 'express';
import socket from 'socket.io';

import { intialiseWebSocketConnection } from './socketio';

const app = express();

app.use(cors());

const server = app.listen(5000, function () {
  console.log('Server is connectedd on *:5000');
});

const io = socket.listen(server);

intialiseWebSocketConnection(io);

推荐答案

您正在尝试通过设置凭据标记并将 Access-Control-Allow-Origin 设置为的跨域请求任何 (*).出于安全原因，不允许这样做.有两种方法可以解决此问题.如果您不需要发送凭据，请确保凭据标志为false.也就是说，如果您使用的是 XMLHttpRequest ，请确保 withCredentials 不是true(默认情况下为false).如果您使用的是 Fetch API ，请确保将 Request.credentials 设置为忽略" .

You are attempting to make a cross-origin request with the credentials flag set and the Access-Control-Allow-Origin set to any (*). This is not allowed for security reasons. There are two ways to solve the problem. If you don't need to send credentials make sure the credentials flag is false. That is, if you are using an XMLHttpRequest make sure withCredentials is not true (it is false by default). If you are using the Fetch API make sure Request.credentials is set to "omit".

如果由于某些原因确实需要发送凭据，则必须在服务器对源的响应中设置 Access-Control-Allow-Origin ，从该源向服务器发送请求，并且不适用(*).要弄清您的来源是什么，只需检查发送到服务器的请求中 Origin 标头设置为什么.

If you do need to send credentials for some reason, you have to set the Access-Control-Allow-Origin in your server's response to the origin from where you are sending requests to the server and not to any (*). To figure out what your origin is just check to what the Origin header is set to in the requests you send to the server.

默认情况下， cors()将 Access-Control-Allow-Origin 设置为*.尝试将其更改为:

By default cors() sets the Access-Control-Allow-Origin to *. Try changing it to:

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

还请注意，Chrome不支持将 localhost 作为来源.为了解决这个问题，您可以在开发过程中使用-disable-web-security 标志启动Chrome.

Also note Chrome does not support localhost as an origin. To get around that you can start Chrome with the --disable-web-security flag during development.

这篇关于Socket.io和express应用由于CORS错误而无法连接:“'Access-Control-Allow-Origin'标头的值不得为通配符'*'"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！