如何支持跨域请求

悠悠 2022-12-22 11:07 114阅读 0赞

可以看看这一篇：[https://program.blog.csdn.net/article/details/84849418?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromBaidu-1.control][https_program.blog.csdn.net_article_details_84849418_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control]

在Controller中看到@CrossOrigin ，这是什么？有什么用？为什么要用？

what？

@CrossOrigin是用来处理跨域请求的注解

先来说一下什么是跨域：

[**（站在巨人的肩膀上）**][Link 1]

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对[JavaScript][]施加的安全限制。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

[http://www.123.com/index.html][http_www.123.com_index.html] 调用 [http://www.123.com/server][http_www.123.com_server].[PHP][] （非跨域）

[http://www.123.com/index.html][http_www.123.com_index.html] 调用 [http://www.456.com/server][http_www.456.com_server].[php][PHP] （主域名不同:123/456，跨域）

[http://abc.123.com/index.html][http_abc.123.com_index.html] 调用 [http://def.123.com/server.php][http_def.123.com_server.php]（子域名不同:abc/def，跨域）

[http://www.123.com:8080/index.html][http_www.123.com_8080_index.html]调用 [http://www.123.com:8081/server.php][http_www.123.com_8081_server.php]（端口不同:8080/8081，跨域）

[http://www.123.com/index.html][http_www.123.com_index.html] 调用 [https://www.123.com/server.php][https_www.123.com_server.php]（协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行[javascript][JavaScript]脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

当域名www.abc.com下的js代码去访问www.def.com域名下的资源，就会受到限制。

@CrossOrigin可以处理跨域请求，让你能访问不是一个域的文件。

\--------------------------------------------------------------------------------------------------------------------------------------------

**1.全局跨域**

package com.ranxx.conf;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    /**
     * 跨域问题
     *
     * @author mousejoo
     */
    @Configuration
    public class CorsConfig {
    	private CorsConfiguration buildConfig() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*"); // 1 允许任何域名使用
            corsConfiguration.addAllowedHeader("*"); // 2 允许任何头
            corsConfiguration.addAllowedMethod("*"); // 3 允许任何方法（post、get等）
            return corsConfiguration;
        }
    
        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig()); // 4
            return new CorsFilter(source);
        }
    	
    
    }

或

@Configuration
    public class GlobalCorsConfig {
        @Bean
        public CorsFilter corsFilter() {
            //1.添加CORS配置信息
            CorsConfiguration config = new CorsConfiguration();
              //放行哪些原始域
              config.addAllowedOrigin("*");
              //是否发送Cookie信息
              config.setAllowCredentials(true);
              //放行哪些原始域(请求方式)
              config.addAllowedMethod("*");
              //放行哪些原始域(头部信息)
              config.addAllowedHeader("*");
              //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
              config.addExposedHeader("content-type");
    
            //2.添加映射路径
            UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
            configSource.registerCorsConfiguration("/**", config);
    
            //3.返回新的CorsFilter.
            return new CorsFilter(configSource);
        }
    }

**2. 使用注解（局部跨域）**

@RequestMapping("/preUser")
    @CrossOrigin("http://localhost:8080")
    public Map<String,String> preUser(){
        Map<String,String> map = new HashMap<String,String>();
        map.put("preUser","success");
        return map;
    }

或者在控制器（@Controller）上使用注解 **@CrossOrigin** ：

@RestController
    @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)
    public class CorsController {
        
        @RequestMapping("/preUser")
        public Map<String,String> preUser(){
            Map<String,String> map = new HashMap<String,String>();
            map.put("preUser","success");
            return map;
        }
    }

**3. 手工设置响应头（局部跨域）**

@RequestMapping("/hello")
    @ResponseBody
    public String index(HttpServletResponse response){
        response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        return "Hello World";
    }

Access-Control-Allow-Origin 表示允许哪些原始域进行跨域访问。

Access-Control-Allow-Credentials表示是否允许客户端获取用户凭据。

Access-Control-Allow-Methods 表示允许哪些跨域请求的提交方式。（例如GET/POST）

Access-Control-Expose-Headers 表示允许暴露哪些头部信息给客户端。

Access-Control-Max-Age 表示预检请求 \[Preflight Request\] 的最大缓存时间。

[https_program.blog.csdn.net_article_details_84849418_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control]: https://program.blog.csdn.net/article/details/84849418?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control
[Link 1]: http://blog.csdn.net/lambert310/article/details/51683775
[JavaScript]: http://lib.csdn.net/base/javascript
[http_www.123.com_index.html]: http://www.123.com/index.html
[http_www.123.com_server]: http://www.123.com/server
[PHP]: http://lib.csdn.net/base/php
[http_www.456.com_server]: http://www.456.com/server
[http_abc.123.com_index.html]: http://abc.123.com/index.html
[http_def.123.com_server.php]: http://def.123.com/server.php
[http_www.123.com_8080_index.html]: http://www.123.com:8080/index.html
[http_www.123.com_8081_server.php]: http://www.123.com:8081/server.php
[https_www.123.com_server.php]: https://www.123.com/server.php