由于浏览器连接的是服务器上的websocket，导致出现了如下跨域错误：
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://a.com' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute。
先分析下出现这个问题的原因：由于前后端分离导致我们通常会写跨域配置（如下代码）。但是报错很明显指出request's credentials mode is 'include'，那么响应就the response must not be the wildcard '*’。所以直接配置Access-Control-Allow-Origin的值为通配是行不通的。具体怎么解决我接下来会讲。
package cn.datainvest.core.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 解决跨越配置类
* @author yangfeng
*
*/
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
/**
* 跨域过滤器
*
* @return
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}springboot集成websocket步骤如下：
1.引入依赖
<!--Websocket-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2：WebSocketConfig
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
/**
* @author yangfeng
**/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
}
}3.业务代码
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
@Component
public class Weather {
@Resource
private IWeatherService weatherService;
private static Logger LOG = LoggerFactory.getLogger(WeatherScheduler.class);
@Autowired
private SimpMessagingTemplate messagingTemplate;
/**
* 保存天气信息
*/
public void saveWeather() {
ServiceResult<WeatherAO> serviceResult = weatherService.getWeatherAndSave();
if (serviceResult != null && serviceResult.isSucceed() && serviceResult.getData() != null) {
WeatherAO weather = serviceResult.getData();
//发送数据到webscoket
messagingTemplate.convertAndSend("/topic/weather", weather);
}
}
}4.vue连接socket，开发环境访问地址：localhost:8089。很明显连接这里出现跨域了。
<template>
<div class="">、
<h1>Stock Price</h1>
<div>
<button @click="senMessage">发送消息</button>
<ul>
<li v-for="m in list1" :key="m.name">{{ m.name }}: {{ m.price }}</li>
</ul>
</div>
</div>
</template>
<script>
import SockJS from 'sockjs-client'
import Stomp from 'webstomp-client'
export default {
data() {
return {
list1: [],
stompClient: null
}
},
mounted() {
this.initWebSocket()
},
methods: {
senMessage() {
this.stompClient.send('/app/hello')
},
initWebSocket() {
this.connection()
// 需要有一个失败重连得到问题
},
connection() {
// 更换that指针
const socket = new SockJS('http://112.174.126.131:8080/websocket')
this.stompClient = Stomp.over(socket)
//建立连接，订阅主题
this.stompClient.connect({}, (frame) => {
console.log(frame)
this.stompClient.subscribe('/topic/terminalTrace', (val) => {
// this.list1 = JSON.parse(val.body)
console.log('-------++++++++++++++++++++++++++++++------------')
//下面会报错，应该是json的问题，但是数据可以接收到
console.log(val.body)
})
this.stompClient.subscribe('/topic/weather', (val) => {
// this.list1 = JSON.parse(val.body)
console.log('-------++++++++++++++++++++++++++++++------------')
//下面会报错，应该是json的问题，但是数据可以接收到
console.log(val.body)
})
})
// 回调函数 3 end
}
}
}
</script>
5.使用filter来解决
把之前写的跨域类CorsConfig 删除，加入下面的filter。
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
@Component
public class CorsFilter implements Filter {
// This is to be replaced with a list of domains allowed to access the server
//You can include more than one origin here
private final List<String> allowedOrigins = Arrays.asList("http://localhost:8089");
public void destroy() {
}
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
// Lets make sure that we are working with HTTP (that is, against HttpServletRequest and HttpServletResponse objects)
if (req instanceof HttpServletRequest && res instanceof HttpServletResponse) {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
// Access-Control-Allow-Origin
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", allowedOrigins.contains(origin) ? origin : "*");
response.setHeader("Vary", "Origin");
// Access-Control-Max-Age
response.setHeader("Access-Control-Max-Age", "3600");
// Access-Control-Allow-Credentials
response.setHeader("Access-Control-Allow-Credentials", "true");
// Access-Control-Allow-Methods
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
// Access-Control-Allow-Headers
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, " + "X-CSRF-TOKEN");
}
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {
}
}加入origin的路径配置：
6.测试
