关于跨域问题，CORS的问题？

  • Z时代
  • 2024-02-25
  • 分类：IT

我有一个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 来让浏览器允许跨域。

server {
  listen 80;
  server_name example.com;
  location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    # your API configuration goes here
  }
}

回答：

可以发一下你的响应头信息嘛？
另外也可以发以下详细报错截图。

跨域目前常用的方案就是 后端设置响应头 Access-control-Allow-Origin 为 *即可处理所有的跨域；

回答：

后端增加允许跨域头就行了。
或者在Nginx中做一个代理转发功能。

回答：

破案了 是前端的请求的url中没有加上http://导致的，我加上之后就可以了

以上是 关于跨域问题，CORS的问题？ 的全部内容， 来源链接： utcz.com/p/945117.html

回到顶部