如何解决React和快速API中的CORS错误

Question

我在快速API中添加了laster_origins，但是错误仍然是SAEM，请提供帮助，

这是我尝试连接并发出消息的React代码：

import io from 'socket.io-client'

const socket = io(
  'https://samsara-chat.herokuapp.com/chatroom/check-chat?token=8acfbead5bb2070f112975dc188400b4bac8127b&receiver=saken2.0'
)

function Socket() {
  const [message, setMessage] = useState()
  console.log(message, 'message')
  const sendMessage = () => {
    socket.emit('message:', { message: message })
  }
  return (
    <>
      <input type="text" onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>send message</button>
    </>
  )
}

export default Socket

这是我给出的快速API代码，我给出了允许Origins

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

from server.routers import chatrooms
from server.routers.socketio import sio

socket_app = socketio.ASGIApp(sio)

# TODO CORS
app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    # allow_origins=['*'],
    allow_origins=["http://localhost","http://127.0.0.1:3000", 'http://localhost:8080', "http://localhost:3000", "https://samsara-web.netlify.app"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
app.include_router(chatrooms.router, prefix='/chatroom')

app.mount("/", socket_app)

问题是问题。在'https://samsara-chat.herokuapp.com/socket.io/?token=6BA855C85C88F67C3FBF9A864EF617E41A696745FB＆amp.amp = saken2.saken2.0&emp.eio = amantport中/本地主机：3000'已被CORS策略阻止：'access-control-allow-oferigin'标头包含多个值'http：// localhost：3000，http：// http：// localhost：3000'，但只允许使用一个。让服务器以有效的值发送标题，或者，如果不透明响应满足您的需求，请将请求模式设置为“ no-cors”，以通过禁用CORS来获取资源。

Answer 1

这应该有帮助：

origins = [
    "*"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)