我有一个HTML文档,CORS.html,其内容是:
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// (1)创建异步对象
var ajaxObj = new XMLHttpRequest();
// (2)设置请求的参数。包括:请求的方法、请求的url。
ajaxObj.open('get', 'localhost:8080/hello');
// (3)发送请求
ajaxObj.send();
//(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回,我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
然后我放在E盘,然后起一个nginx,location指向的是E盘,然后能够访问E盘中的静态资源了,如果访问CORS.html后点击“发送get_ajax请求”按钮,来跨域访问,却返回CORS错误。
后端是springboot,试过3种方法 都不能正常跨域访问:
@CrossOrigin(origins = "*", allowedHeaders = "*", methods = {RequestMethod.GET, RequestMethod.POST})
@Configuration @Slf4j public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*"); log.info("registry==>{}", registry); } @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new HandlerInterceptor() { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { log.info("request={}", request.getHeaderNames()); log.info("响应头={}", response.getHeaderNames()); return true; } }); } }
@Configuration public class GlobalCorsConfig { @Bean public CorsFilter corsFilter() { //new一个CorsConfiguration对象用于CORS配置信息 CorsConfiguration corsConfiguration = new CorsConfiguration(); //允许所有域的请求 corsConfiguration.addAllowedOrigin("*"); //允许请求携带认证信息(cookies) corsConfiguration.setAllowCredentials(true); //允许所有的请求方法 corsConfiguration.addAllowedMethod("*"); //允许所有的请求头 corsConfiguration.addAllowedHeader("*"); //允许暴露所有头部信息 corsConfiguration.addExposedHeader("*"); //添加映射路径 UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration); //返回新的CorsFilter对象 return new CorsFilter(urlBasedCorsConfigurationSource); } }
以上3种都试过了 都不行,这是咋回事呢?
关键问题是你的 CORS.html 是如何显示在浏览器上的。
如果你双击这个文件直接在浏览器打开的
那么必然不行。因为浏览器在请求这个文件的时候是直接从磁盘读取的,没有任何服务器,所以浏览器也拿不到 response header 中的 Access-control-Allow-Origin.
如果你的 CORS.html 是通过 NGINX 来 serve 的
那么就可以通过配置 NGINX 中的 location 中的 Access-control-Allow-Origin 来让浏览器允许跨域。