跨域资源共享 CORS 详解

下面是关于“跨域资源共享 CORS 详解”的完整攻略，包含两个示例说明。

简介

跨域资源共享（CORS）是一种机制，它允许Web应用程序从不同的域访问其资源。在本攻略中，我们将介绍CORS的工作原理、如何在ASP.NET中启用CORS以及如何使用CORS来访问其他域的资源。

工作原理

CORS的工作原理是通过在HTTP响应头中添加一些特殊的标头来实现的。当浏览器发现请求的目标不在同一个域时，它会发送一个预检请求（OPTIONS请求），以确定是否允许跨域请求。如果服务器允许跨域请求，它将在响应头中添加一些特殊的标头，以允许浏览器访问资源。

启用CORS

在ASP.NET中启用CORS时，我们可以通过以下步骤来实现：

1. 安装Microsoft.AspNet.WebApi.Cors包。

dotnet add package Microsoft.AspNet.WebApi.Cors

在上面的命令中，我们使用dotnet命令来安装Microsoft.AspNet.WebApi.Cors包。

1. 在WebApiConfig.cs文件中启用CORS：

public static void Register(HttpConfiguration config)
{
    // 启用CORS
    config.EnableCors();

    // ...
}

在上面的代码中，我们在Register方法中启用了CORS。

1. 在控制器中添加[EnableCors]特性：

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class MyController : ApiController
{
    // ...
}

在上面的代码中，我们在MyController上添加了[EnableCors]特性，并指定了允许的来源、头和方法。

示例

示例1：从其他域访问API

在本示例中，我们将使用CORS从其他域访问API。我们可以通过以下步骤来实现：

1. 在API项目中启用CORS。

2. 在控制器中添加[EnableCors]特性：

[EnableCors(origins: "http://localhost:3000", headers: "*", methods: "*")]
public class MyController : ApiController
{
    // ...
}

在上面的代码中，我们在MyController上添加了[EnableCors]特性，并指定了允许的来源、头和方法。

1. 在其他域的应用程序中访问API：

fetch('http://localhost:port/api/My')
  .then(response => response.json())
  .then(data => console.log(data));

在上面的代码中，我们使用了fetch API来访问API，并将响应转换为JSON格式。

示例2：使用自定义标头

在本示例中，我们将使用CORS来允许自定义标头。我们可以通过以下步骤来实现：

1. 在API项目中启用CORS。

2. 在控制器中添加[EnableCors]特性：

[EnableCors(origins: "*", headers: "X-Custom-Header", methods: "*")]
public class MyController : ApiController
{
    // ...
}

在上面的代码中，我们在MyController上添加了[EnableCors]特性，并指定了允许的来源、头和方法。在这里，我们只允许X-Custom-Header标头。

1. 在其他域的应用程序中访问API，并添加自定义标头：

fetch('http://localhost:port/api/My', {
  headers: {
    'X-Custom-Header': 'Custom Value'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

在上面的代码中，我们使用了fetch API来访问API，并添加了一个名为X-Custom-Header的自定义标头。

在上面的示例中，我们使用了CORS来允许从其他域访问API，并允许自定义标头。这种方式可以帮助我们更好地处理跨域请求，并提高开发效率。