首页 >web前端 >js教程 >当我尝试从'https://googledocs-clone-sbayrak.netlify.app/”连接到'https://googledocs-clone-sbayrak.herokuapp.com/”时,为什么会出现 CORS 错误?

当我尝试从'https://googledocs-clone-sbayrak.netlify.app/”连接到'https://googledocs-clone-sbayrak.herokuapp.com/”时,为什么会出现 CORS 错误?

DDD
DDD原创
2024-11-03 00:18:02846浏览

Why am I getting CORS errors when trying to connect to 'https://googledocs-clone-sbayrak.herokuapp.com/' from 'https://googledocs-clone-sbayrak.netlify.app/'?

允许来自“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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn