关于跨域问题,CORS的问题?

新手上路,请多包涵

我有一个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种都试过了 都不行,这是咋回事呢?

阅读 2.5k
4 个回答

关键问题是你的 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://导致的,我加上之后就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题