从 Ionic 访问 ASP.NET Core WebApi 时出错答案

【问题标题】：Error when accessing ASP.NET Core WebApi from Ionic从 Ionic 访问 ASP.NET Core WebApi 时出错
【发布时间】：2018-11-19 20:37:55
【问题描述】：

我在从 Ionic 应用程序调用 ASP.NET Core WebAPI 时遇到了一些问题。

我可以在开发人员工具中看到数据已正确加载，但 Ionic 给了我一个错误：

来自 Ionic 的错误消息：

从 api 加载的数据：

在 api 中启用了 CORS：

 public class Startup
 {
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();   
        services.AddDbContext<TodoContext>(opt =>
            opt.UseInMemoryDatabase("TodoList"));
        services.AddMvc()
            .SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    }

    public void Configure(IApplicationBuilder app)
    {
        app.UseCors(builder => builder.WithOrigins("http://localhost"));
        app.UseMvc();
    }
}

我认为错误是由 Ionic 或 Angular 引起的。当我从公共 api 加载数据时，一切正常。我也试过用 ssl 和不用 ssl 访问 api。

如有任何问题，请随时在 cmets 中问我。

编辑

这就是我调用 api 的方式：

@Injectable()
export class RestProvider {

apiUrl = 'https://localhost:5001/api';

constructor(public http: HttpClient) { }

getTodoItems() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl + '/todo').subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }
}

这是我的控制器：

[Route("api/[controller]")]
[ApiController]
public class TodoController : ControllerBase
{
    private readonly TodoContext _context;

    public TodoController(TodoContext context)
    {
        _context = context;

        if (_context.TodoItems.Count() == 0)
        {
            _context.TodoItems.Add(new TodoItem { Title = "Item1" });
            _context.TodoItems.Add(new TodoItem { Title = "Item2" }); 
            _context.SaveChanges();
        }
    }

    [HttpGet]
    public ActionResult<List<TodoItem>> GetAll()
    {
        return _context.TodoItems.ToList();
    }
}

【问题讨论】：

我遇到了这个问题，我通过添加 cors allow origin to web.config 解决了这个问题，我不使用任何代理任何 chrome 插件。所有 API 函数都可以正常工作
而且你必须在你的asp项目中添加一个nuget库并操作你的路由。
我不确定这个错误是由 cros 引起的，因为你没有将你的 http.post 代码分享给我们
@mohsensolhnia ASP.NET Core 中没有 web.config。我在 ASP.NET Core 中启用了 cors，如下所示：link。该错误不是由cors引起的。我可以调用 api 并获取数据，但 Ionic 给了我这个错误。
也许你返回的 json 大小很大.... 直到看到你的代码才能解决

标签： angular ionic-framework ionic3 asp.net-core-webapi asp.net-core-2.1

【解决方案1】：

通过添加端口号修复它：

public void Configure(IApplicationBuilder app)
{
    app.UseCors(builder => builder.WithOrigins("http://localhost:8100").AllowAnyMethod());
    app.UseMvc();
}

【讨论】：

【解决方案2】：

您可以使用 ionic.config.json 文件在您的应用中配置代理：

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

那么在进行http调用时：

httpClient.get(proxyHost + '/api');

更多信息Ionic Blog

【讨论】：

感谢您的提示。我必须在代理中添加 "rejectUnauthorized": false 因为我使用的是自签名证书。
很高兴！你甚至可以使用mitm proxy，它有一个证书，你可以安装在你的手机上，用来测试自签名证书上的API调用。
永远不要使用代理。它不能在本机设备中工作，特别是在 ios 中
你不能说从不使用代理。代理主要用于 ionic serve -cl，它将在 chrome/firefox/IE 中启动。在移动设备上，源是文档本身，而不是提供代码的 nodejs 服务器。