C# WebApi CORS跨域问题解决方案

我会为您提供 C# WebApi 解决 CORS 跨域问题的完整攻略，包含基本概念、解决方法、示例说明等内容。

什么是 CORS

CORS 是跨域资源共享 (Cross-Origin Resource Sharing) 的缩写，即在浏览器端，通过某种机制允许在跨域访问请求时，满足指定的、安全的条件下，支持在不同的域名之间共享资源。在开发 Web 应用时，经常会遇到协议、域名、端口不同的访问，这时就会出现跨域访问问题。

WebApi CORS 跨域问题的解决方法

解决 WebApi 的 CORS 跨域问题，需要在服务器端进行相关配置。下面将分步骤介绍解决方法：

1. 安装 Microsoft.AspNet.WebApi.Cors

在 Visual Studio 中打开 NuGet 管理器控制台，输入以下命令安装 Microsoft.AspNet.WebApi.Cors：

Install-Package Microsoft.AspNet.WebApi.Cors

2. 在 WebApiConfig.cs 文件中添加配置

打开 WebApiConfig.cs 文件，添加以下语句：

config.EnableCors();

3. 配置支持跨域的域名和请求类型

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

或者，我们可以具体配置可访问的源、Method、headers 等信息：

config.EnableCors(new EnableCorsAttribute("http://localhost:9000", "*", "*", "cookie,Authorization"));

在上面的代码中，我们允许访问 http://localhost:9000 发起跨域请求，并且支持所有请求方法，以及支持使用 cookie、Authorization 等 header。

这样，我们就完成了 WebApi 的 CORS 跨域问题的解决。

示例说明

下面，我们给出两个示例说明：

示例一：使用 jQuery 发起跨域请求

在客户端使用 jQuery 发起跨域请求的代码示例如下：

$.ajax({
    url: 'http://localhost:9001/api/values',
    type: 'POST',
    xhrFields: {
        withCredentials: true
    },
    data: JSON.stringify({
        value: 'hello world'
    }),
    contentType: 'application/json',
    success: function (data) {
        console.log('success: ' + data);
    },
    error: function (xhr, textStatus, error) {
        console.log('error: ' + error);
    }
});

示例二：使用 axios 发起跨域请求

在客户端使用 axios 发起跨域请求的代码示例如下：

axios.post('http://localhost:9001/api/values', {
    value: 'hello world'
}, {
    withCredentials: true,
    headers: {
        'Content-Type': 'application/json'
    }
}).then(function (response) {
    console.log('success: ' + response.data);
}).catch(function (error) {
    console.log('error: ' + error);
});

以上就是 WebApi CORS 跨域问题的解决及相应示例代码的介绍。