极客观点
项目管理
HarmonyOS
我有一个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种都试过了 都不行，这是咋回事呢？
java
关键问题是你的 CORS.html 是如何显示在浏览器上的。
如果你双击这个文件直接在浏览器打开的
那么必然不行。因为浏览器在请求这个文件的时候是直接从磁盘读取的，没有任何服务器，所以浏览器也拿不到 response header 中的 Access-control-Allow-Origin.
如果你的 CORS.html 是通过 NGINX 来 serve 的
那么就可以通过配置 NGINX 中的 location 中的 Access-control-Allow-Origin 来让浏览器允许跨域。