當我嘗試從「https://googledocs-clone-sbayrak.netlify.app/」連接到「https://googledocs-clone-sbayrak.herokuapp.com/」時，為什麼會出現 CORS 錯誤？

允許來自「https://googledocs-clone-sbayrak.netlify.app/」的跨源請求

CORS由於客戶端和伺服器設定之間的配置不符而發生錯誤。在這種情況下，在「https://googledocs-clone-sbayrak.netlify.app/」處的客戶端應用程式正在嘗試連接到「https://googledocs-clone-sbayrak.herokuapp.com/」處的伺服器端點，但伺服器配置為僅接受來自「https://googledocs-clone-sbayrak.netlify.app/」的請求。這會導致 CORS 錯誤，因為請求的原始標頭與允許的值不符。

解決 CORS 錯誤

解決此錯誤的關鍵在於確保伺服器上允許的來源與請求的來源相符。導致錯誤的錯誤配置是使用“https://googledocs-clone-sbayrak.netlify.app/”作為允許的來源。但是，網路來源不包含路徑，因此尾部斜線會導致匹配失敗。

要解決此問題，應將允許的來源更新為「https://googledocs-clone-sbayrak.netlify」。 app' 不含尾部斜線。這是修正後的cors 配置：

<code class="typescript">const io = socketio(server, {
  cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app',
    methods: ['GET', 'POST'],
  },
});</code>

透過從允許的原始值中刪除尾部斜杠，它現在將正確匹配請求的原始標頭，從而允許跨來源請求成功，並且客戶端可以與伺服器。

以上是當我嘗試從「https://googledocs-clone-sbayrak.netlify.app/」連接到「https://googledocs-clone-sbayrak.herokuapp.com/」時，為什麼會出現 CORS 錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！