Ionic调用POST接口遇CORS错误求助（已开启服务端CORS）

看起来你遇到了两个关键问题：CORS配置不匹配 + 请求参数顺序错误，我来一步步帮你解决：

1. 先修复Ionic请求代码的参数错误 #

你的HttpClient.post方法参数顺序完全搞错了！Angular的post方法签名是：

post(url: string, body: any, options?: { headers?: HttpHeaders; ... }): Observable<any>

你现在把headers当成了请求体（第二个参数）传进去，这会导致请求格式完全异常，同时结合withCredentials的设置触发了CORS错误。修正后的代码应该是这样：

let headers = new HttpHeaders();
headers = headers
 .set("Accept", "application/json")
 .set("Content-Type", "application/json");

// 这里要定义你的POST请求体数据，比如：
const body = { /* 你的业务参数，比如username: 'test', password: '123'之类的 */ };

const options = { 
  headers: headers, 
  withCredentials: true // 保持这个设置，但需要服务端配合调整
};

return this.http
 .post("http://mywebservice.com/api", body, options )
 .pipe(tap(res => console.log(res))); // 注意：Angular 6+推荐用pipe+tap代替旧的do操作符

2. 调整NancyFX的CORS配置 #

错误提示的核心逻辑是：当请求的credentials mode为include（也就是你设置了withCredentials: true）时，浏览器不允许服务端用通配符*作为Access-Control-Allow-Origin的值，必须明确指定你的Ionic应用源http://localhost:8100，同时还要开启允许凭证的配置。

如果你之前用的是Nancy的CORS模块，修改配置如下：

using Nancy;
using Nancy.Bootstrapper;
using Nancy.Cors;

public class CustomBootstrapper : DefaultNancyBootstrapper
{
    protected override void ApplicationStartup(TinyIoCContainer container, IPipelines pipelines)
    {
        base.ApplicationStartup(container, pipelines);

        var corsOptions = new CorsOptions
        {
            AllowedOrigins = new[] { "http://localhost:8100" }, // 明确指定你的Ionic应用地址
            AllowedMethods = new[] { "GET", "POST", "PUT", "DELETE" },
            AllowedHeaders = new[] { "Accept", "Content-Type" },
            AllowCredentials = true // 必须开启这个，对应前端的withCredentials设置
        };

        pipelines.EnableCors(corsOptions);
    }
}

为什么Advanced Rest Service测试正常？ #

因为Postman/Advanced Rest Service这类工具不会严格遵循浏览器的CORS安全规则——它们不会发送预校验的OPTIONS请求，也不会校验Access-Control-Allow-Origin和凭证模式的匹配关系，所以工具里测试通过，但浏览器环境下会报错。

最后验证步骤 #

1. 重启你的NancyFX服务端，确保新的CORS配置生效
2. 确认Ionic的请求代码参数顺序正确，请求体数据符合接口要求
3. 重新运行Ionic应用，发起请求

这样应该就能解决你遇到的错误了！

内容的提问来源于stack exchange，提问作者slayer35