ASPWebApi 对预检请求的响应未通过访问控制检查

Question

当我的 Angular 应用程序尝试访问 ASP WebApi 应用程序时遇到问题，每个应用程序都在不同的服务器中。 当我的 Angular 应用程序尝试访问时，我收到消息：“来自原点 'http://ubex:4200' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin'请求的资源上存在标头。”

我尝试根据找到的文档以不同的方式（全局、控制和操作）启用 CORS，但问题仍然存在。

当我运行我的 Angular 应用程序时，我运行： $ ng serve --host 0.0.0.0 --port 4200 --disable-host-check 如果我在没有“禁用主机检查”的情况下运行，则应用程序不会运行。

这是我的 WebApi.config.cs：

public static void Register(HttpConfiguration config)
    {
        // Enable CORS: le estamos permitiendo a la direccion:4200 consumir la aplicacion con todo y sus metodos
        // config.EnableCors(new EnableCorsAttribute("http://ubex:4200", headers:"*", methods:"*"));
        // config.EnableCors(new EnableCorsAttribute("http://192.168.100.152:4200", headers: "*", methods: "*"));


        EnableCorsAttribute cors = new EnableCorsAttribute("http://192.168.100.152:4200", "*", "GET,POST");
        config.EnableCors(cors);


        // Web API configuration and services

        //Configuración para verificar la seguridad del CORS
        //var corsAttr = new EnableCorsAttribute("*", "*", "*");
        //config.EnableCors(corsAttr);

如您所见，我已经尝试过多种方式，这是添加到我的 web.config 中的标头：

<httpProtocol>
      <customHeaders>

          <add name="Access-Control-Allow-Origin" value="*" />
          <!--<add name="Access-Control-Allow-Headers" value="Content-Type, Origin, X-Requested-With, Accept" />-->
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
          <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
          <add name="Access-Control-Allow-Credentials" value="true" />
        <!--
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
        -->
      </customHeaders>
</httpProtocol>

我已经添加了这个模块（以防万一）：

<modules runAllManagedModulesForAllRequests="true"></modules>

这是我的角度服务：

export class EmployeeService { 

 formData: Employee; 
 readonly rootURL = "http://192.168.100.151:44344/api"
 constructor( private _http: HttpClient ) { }

 postEmployee ( formData: Employee ) {
   return this._http.post( this.rootURL + '/Employee', formData );
 }
}

拜托，我需要知道，我是否遗漏了什么，我希望任何人都可以帮助我..

最好的问候

Answer 1

我猜您主要是在您的开发环境中遇到此问题，其中 API 托管在 IIS 中，并且您使用 npm run 或 ng serve 运行 Angular 应用程序，该应用程序由基于节点的 lite 服务器旋转。

要解决这个问题，你不需要添加 CORS 头，这意味着有一个更简单的方法来处理这个问题：Angular 的代理配置（实际上是 webpack 的）。设置一个proxy-config.json，作为 API 请求的代理。通常，它会包含如下 JSON：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

除了Angular docs - Proxy to backend，还有很多关于这个主题的博客。以下是一些：

• 修复 Angular 8 中的 CORS：使用 CLI 代理配置 Alex Ssanya https://link.medium.com/taMNLwiIr2
• Angular — How To Proxy To Backend Server by Bhargav Bachina https://link.medium.com/LUJlg1zIr2（非常详细，但请注意，这可能需要 Medium 订阅。）

如果您实际上在生产中遇到此问题，还有另一个问题。 “Angular 2+ 不支持 prod 构建中的代理以及如何使用 API.NET RESTful API 解决它” by Thanh Nguyen Tien https://link.medium.com/nONOmotIr2

Answer 2

感谢克里希南。

我创建了配置代理文件：

{
"/api/*": {
"target": "http://192.168.100.151:80"
, "secure": false
, "changeOrigin": true
, "logLevel": "debug"
, "pathRewrite": {
  "^/api": "http://192.168.100.151:80/api"
}

} }

引用angular.json中的代理配置：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app10crudapi:build"
        , "proxyConfig": "proxy.conf.json"
      },

（以防万一）我允许 WebApi 服务器中的传入连接：

netsh http add urlacl url=http://192.168.100.151:80/ user=everyone
netsh advfirewall firewall add rule name="IISWeb123" dir=in protocol=tcp localport=80 
profile=private remoteip=localsubnet action=allow

这是本地子网

我检查了 IIS 配置中的 Access-Control-Allow-Origin，因为它有多个值（我不知道为什么），但它现在可以工作了。

在我的 WebApiConfig.cs 上：

 public static void Register(HttpConfiguration config)
    {
        EnableCorsAttribute cors = new EnableCorsAttribute("http://192.168.100.152:4200", "*", "GET,POST");
        config.EnableCors(cors);