.Net Core 处理跨域问题

叁歲伎倆 2024-04-19 15:41 88阅读 0赞

### 一、什么是跨域（源） ###

跨域指的是从一个域名下去请求另外一个不同的域名下的资源。

说明：跨域和跨源可以看作相同，只是用词不一样

### 二、为什么会有跨域（源）这个问题 ###

原因：浏览器的同源策略导致了跨域（源）  
同源策略说明：https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin\_policy

举例：http://www.a.com:8080/index.html  
当协议（http、https）、域名(www.a.com)、端口号(8080)中任意一个不相同时，都算作不同域。  
当浏览器页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

<table> 
 <thead> 
  <tr> 
   <th>URL</th> 
   <th>URL2&nbsp;&nbsp;</th> 
   <th>是否同域（源）</th> 
   <th>&nbsp;原因</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>http://www.a.com/index.html</td> 
   <td>http://www.a.com/index.html</td> 
   <td>是</td> 
   <td>协议、域名、端口号都相同</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/index.html</td> 
   <td>http://www.a.com/login.html</td> 
   <td>是</td> 
   <td>协议、域名、端口号都相同,说明index和login可以不同，也是同域</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/index.html&nbsp;</td> 
   <td>https://www.a.com/index.html</td> 
   <td>否</td> 
   <td>不同协议 ( https和http )</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com:/index.html</td> 
   <td>http://www.a.com:81/index.html</td> 
   <td>否</td> 
   <td>不同端口 ( http://www.a.com:/index.html &nbsp;默认80端口号)</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/index.html&nbsp;</td> 
   <td>http://www.b.com/index.html</td> 
   <td>否</td> 
   <td>不同域名</td> 
  </tr> 
  <tr> 
   <td>http://www.c.a.com/index.html&nbsp;</td> 
   <td>http://www.b.a.com/index.html</td> 
   <td>否</td> 
   <td>不同域名，二级域名不同</td> 
  </tr> 
  <tr> 
   <td>http://localhost:8081/index.html</td> 
   <td>http://127.0.0.1:8081/index.html&nbsp;</td> 
   <td>否</td> 
   <td>虽然localhost等同于 127.0.0.1 但是也是非同源的</td> 
  </tr> 
 </tbody> 
</table>

同源策略限制内容有：  
Cookie、LocalStorage、IndexedDB 等存储性内容  
DOM 节点  
AJAX 请求不能发送

但是有些标签是允许跨域加载资源：<img src=XXX> 2.<link href=XXX> 3.<script src=XXX>  3.<iframe src=XXX>  
对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以直接跨域访问资源的。

###    三、处理跨域的方法 ###

跨域资源共享(CORS) ：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access\_control\_CORS  
1.说明：  
（1）跨域资源共享标准有了一组 HTTP 头部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。  
（2）对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求，从而获知服务端是否允许该跨域请求。  
服务器确认允许之后，才发起实际的 HTTP 请求。  
（3）在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

跨域请求可分为简单请求（只请求一次）和预检请求（请求两次，第一次：使用OPTIONS方法发起一个预检请求，第二次：当预检请求允许该跨域请求，再发起实际的HTTP请求）

### 四：NET Core 配置跨域 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][]

## 1.ConfigureServices中配置 ##

//方法一：配置跨域处理，允许所有来源AllowAnyOrigin：
    services.AddCors(options =>options.AddPolicy("自定义的跨域策略名称",policy => policy.AllowAnyOrigin()));
    
    //方法二：允许一个或多个具体来源:
    services.AddCors(options =>
    {
        //注意：自定义的跨域策略名称,必须和Configure中的UseCors的名称必须一致
        options.AddPolicy("自定义的跨域策略名称", policy =>
        {
            //1.允许跨域的来源，多个跨域来源时可以使用`,` 分割， policy.WithOrigins("http://192.168.8.236:4444", "http://192.168.8.236:4445") 
            //2.多个跨域来源时可以使用string[]
            string Origins = "http://192.168.8.236:4444,http://192.168.8.236:4445";
            policy.WithOrigins(Origins.Split(','))
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials();
        });
    });

## 1.Configure中配置 ##

//注意：1.必须位于UserMvc之前   2.自定义的跨域策略名称，必须和ConfigureServices中的AddPolicy的名称必须一致
    app.UseCors("自定义的跨域策略名称");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/401f1c4027704aaaa5f3e6ad020bdb45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ed30e328735e40ad8b9d39bcdc97e14a.png