跨域和同域；跨域的解决

Posted 2022-06-28 好大的月亮

同源：就是指，域名、协议、端口均为相同。

---

简单的来说从
http://a.xx.xx/aaa.html想直接跳转访问http://a.xx.xx:9999/bbb.html就发生跨域了

只要是互相调用的域名不同，端口不同，协议不同（http到https）都成为跨域。

非同源（跨域）限制

1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
2. 无法接触非同源网页的 DOM
3. 无法向非同源地址发送 AJAX 请求

跨域的解决

nginx配置解决

server 
    listen 80;
    server_name test.com www.test.com;
    root /data/web/homepage;
    index index.html;

    location / 
    
    

    location ~ /exchangeApi/ 
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS') 
			#204 No Content：服务器成功处理了请求，但是没有返回任何内容。
            return 204;
        


    

对于跨域头部的解释

1. Access-Control-Allow-Origin

   服务器默认是不被允许跨域的。给nginx服务器配置Access-Control-Allow-Origin
   *后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。

2. Access-Control-Allow-Headers

   是为了防止出现以下错误：

   Request header field Content-Type is not allowed by
   Access-Control-Allow-Headers in preflight response.

   这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。

3. Access-Control-Allow-Methods

   是为了防止出现以下错误：

   Content-Type is not allowed by Access-Control-Allow-Headers in
   preflight response.

4. return 204

   给OPTIONS 添加 204的返回，是为了处理在发送POST请求时Nginx依然拒绝访问的错误. 发送"预检请求"时，需要用到方法
   OPTIONS ,所以服务器需要允许该方法。

OPTIONS：预检请求( preflight request)

规范要求，对那些可能对服务器数据产生副作用的HTTP 请求方法, 特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求，浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）.

Content-Type 字段的类型为 application/json 的请求就是上面所说的搭配某些 MIME 类型的 POST 请求. CORS规定，Content-Type不属于以下MIME类型的，都属于预检请求：

application/x-www-form-urlencoded
multipart/form-data
text/plain

所以 application/json 的请求会在正式通信之前，增加一次"预检"请求，这次"预检"请求会带上头部信息 Access-Control-Request-Headers: Content-Type ：

OPTIONS /api/test HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

Spring Boot：跨域问题解决

过滤器解决

@Configuration
public class CorsConfig 
​
    @Bean
    public CorsFilter corsFilter() 
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    
​

实现WebMvcConfigurer接口然后重写addCorsMappings方法

@Configuration
public class CorsConfig implements WebMvcConfigurer 
​
    @Override
    public void addCorsMappings(CorsRegistry registry) 
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    
​

参考了大佬的博文
https://blog.csdn.net/qq_38128179/article/details/84956552