跨域问题后端解决方式

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {   

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
        response.setHeader("Access-Control-Max-Age", "3600");

        chain.doFilter(req, response);
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}  
}
### 解决WebSocket问题后端配置 对于WebSocket问题,最推荐的方式是利用资源共享(CORS)。当涉及到WebSocket时,浏览器会先发起HTTP请求来完成握手阶段,在这个过程中可以通过设置响应头`Access-Control-Allow-Origin`允许特定源访问资源[^3]。 如果采用Nginx作为反向代理服务器,则可以在其配置文件中加入如下指令实现对WebSocket的支持以及处理: ```nginx http { ... upstream websocket_backend { server backend_server_address:port; } server { listen 80; location /ws/ { proxy_pass http://websocket_backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # 设置允许来自任何名的请求, 实际应用建议指定具体名 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; if ($request_method = 'OPTIONS') { return 204; } } } } ``` 上述配置不仅支持了WebSocket协议升级所需的头部信息传递,还增加了必要的CORS相关头部以便于前端能够成功建立WebSocket连接并发送携带凭证的信息给服务端验证身份[^2]。 另外一种方式是在编写应用程序逻辑的时候直接控制返回给客户端的响应头。例如在一个基于Node.js环境下的Express框架项目里,可以这样做: ```javascript const express = require('express'); const WebSocket = require('ws'); // 创建 Express 应用程序实例 let app = express(); // 启动 HTTP 服务器 let server = require('http').createServer(app); // 初始化 WebSocket 服务器并与 HTTP 服务器绑定在一起工作 let wss = new WebSocket.Server({server}); wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { console.log('received: %s', message); // 发送消息回客户端 ws.send(`Hello, you sent -> ${message}`); }); // 当有新客户端连接上来之后立即推送一条欢迎语句过去 ws.send('Welcome to the WebSocket Server!'); // 主动关闭连接前触发此事件处理器函数执行清理操作 ws.on('close', ()=>{ console.log("client has disconnected."); }); }); app.use((req,res,next)=>{ res.header('Access-Control-Allow-Origin','*'); // 允许所有来源的请求 res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept'); next(); }) server.listen(8080,()=>{ console.log('listening on *:8080'); }); ``` 这段代码片段展示了如何创建一个简单的WebSocket服务器,并且设置了适当的HTTP响应头以应对可能存在的限制情况。需要注意的是这里的`'*'`代表接受所有的外部站点发起的请求,在实际生产环境中应当替换为具体的可信URL地址列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值