I'm trying to connect a flutter web app with C# API with sending and parameter in header "apikey" if I'm sending it the error shows in the browser console

Access to XMLHttpRequest at 'http://localhost:49986/...' from origin 'http://localhost:61306' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

If I removed the "apikey" the connection goes well without error

Web.config code

<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
  <httpProtocol>
      <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Credentials" value="false"/>
          <add name="Access-Control-Allow-Headers" value="Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, apikey" />
          <add name="Access-Control-Allow-Methods" value="POST, OPTIONS" />
      </customHeaders>
  </httpProtocol>
</system.webServer>

Dio part in the flutter web app

static Dio getDio() {
    Dio dio = Dio();
    dio.options.headers.addAll({"apikey": "xyz"});
    return dio;
}

N.B: the request is working well on postman

Is it recommended to disable chrome CORS in development as it's 2 localhosts HTTP or it's not related? Thanks in advance!

Edit: postman test enter image description here