使用 socket.io 跨域问题的解决(整理了四种方法,总有成功的!) Access to XMLHttpRequest at ‘http://localhost:4000/socket.io

最近做项目,前台是react,后台是express+nodejs,用到 socket.io 做聊天功能。

报错:问题大意指跨域了
在这里插入图片描述
客户端代码:

import io from 'socket.io-client'

// 连接服务器, 得到与服务器的连接对象
const socket = io('ws://localhost:4000')

服务器端代码:

module.exports = function (server) {
  const io = require('socket.io')(server)
  io.listen(4001)

  //监视客户端与服务器的连接
  io.on('connection', function (socket) {
    console.log('客户端连接上了服务器')
  })
}

方法一:给 socket.io 赋值一个新的端口。

const _io = require('socket.io')(server)
_io.listen(12312)

参考博客:https://segmentfault.com/q/1010000009849667

没解决我的问题!

方法二:看到有人说查文档发现部署到服务器必须写真实服务器 ip 地址,不能写 hostname

原本的代码如下:

const socket = io('ws://localhost:4000')

修改的代码如下:

const socket = io('ws://xxxx.xxxx.xxxx.xxxx:4000') 

参考博客:https://blog.csdn.net/a1059526327/article/details/106906059

没解决我的问题!!

方法三:在我们初始化 socket.io 的时候 加上一句 cors:true

// socket 初始化
const io = require("socket.io")(server, { cors: true })

参考博客:https://www.79bk.cn/article/62a686f9/

出现了新的报错!!!
在这里插入图片描述
方法四:重新下载 socket.io-client

npm i socket.io-client -s

看到篇博客说客户端中 import io from 'socket.io-client' 引入的 socket.io-client 是包含在 socket.io 中的,我之前也没有单独安装 socket.io-client 依赖,也是直接 npm install socket.io,现在的意思就是 socket.io 中包含的 socket.io-client 与我们要用的 socket.io-client 不同,需要重新下载。

参考博客:https://blog.csdn.net/ZuoZuoDangerou/article/details/112320202

成功解决问题!
在这里插入图片描述

Access to XMLHttpRequest at 'http://39.98.175.93:9099/index/menu' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个错误是由于浏览器的同源策略(Same-Origin Policy)所引起的。同源策略是浏览器的一种安全机制,限制了通过JavaScript发起的跨域请求。 在这个错误中,浏览器检测到你的代码正在尝试从一个源(origin)访问另一个源的资源。在默认情况下,浏览器阻止了这种跨域请求,除非服务器在响应中包含了适当的CORS头部。 为了解决这个问题,你需要在目标服务器上配置CORS头部,使其允许来自'http://example.com'的跨域请求。具体的配置方式和步骤取决于你使用的服务器和框架。 一种常见的解决方法是在服务器端设置响应头部,添加'Access-Control-Allow-Origin'字段,并将其值设为允许跨域请求的源的地址(例如'http://example.com')。这样浏览器就会允许来自该源的请求访问服务器资源了。 另外,你也可以使用代理服务器来绕过同源策略的限制。通过将跨域请求发送到代理服务器,再由代理服务器转发请求给目标服务器,这样就可以在不修改目标服务器配置的情况下实现跨域请求。 总结起来,要解决这个问题,你可以通过配置目标服务器的CORS头部,或者使用代理服务器来实现跨域请求。具体的实施方法和步骤会根据你的服务器和框架而有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玳宸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值