简单来说,主机A想通过ajax请求访问B主机的controller接口返回资源,但受到限制。
<body>
<button id="btnget">发起不带参数的URL请求</button>
<script>
$(function() {
$('#btnget').on('click',function() {
$.get('http://localhost/cctv/user/1',function(res) {
console.log(res);
})
})
})
</script>
</body>
原因
这是因为浏览器的同源策略限制,就是要互相访问,必须满足在同一个主机同一个端口下(同一个域)。
解决方案
只需要在被访问的主机进行全局跨域配置
就是创建一个webmvcConfig 配置类
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/**
* 全局CORS配置
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/user/*") // 映射服务器中那些http接口运行跨域访问
.allowedOrigins("http://localhost:8080") // 允许访问的主机端口
.allowedMethods("GET","POST","DELETE","PUT"); // 配置运行跨域访问的请求方法
}
}
配置类导入后,重启被访问的主机。就可以正常访问了
注意
addMapping不可少,表示配置允许访问的接口
allowedOrigins可不选,表示允许哪些主机+端口可以对我进行访问
allowedMethods可不选,表示允许访问的接口方法。