时间戳

首页 > 解决方案 > React Native 无法访问 Net Core Web Api

react-native - React Native 无法访问 Net Core Web Api

问题描述

我正在尝试开发一个反应原生的移动应用程序。我在项目的开始，我已经卡住了。

我在 VS 2019 中创建了一个新的 Api Web 应用程序。我正在尝试调用 Wea​​therForecastController （从 Visual Studio 创建）。

我编辑了 startup.cs 以避免 CORS 问题。

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        //services.AddCors();
        services.AddControllers();
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseCors(builder =>
        {
            builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
        });

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

我在我的 React Native 项目中安装了 axios。

这就是我调用我的 api 的方式：

componentDidMount() {
axios.get('http://localhost:55622/weatherforecast').then(function (response) {
  console.log("POST RESPONSE: " + JSON.stringify(response));
});

}

我收到的错误是：

[Unhandled promise rejection: Error: Network Error]
- node_modules\axios\lib\core\createError.js:15:17 in createError
- node_modules\axios\lib\adapters\xhr.js:80:22 in handleError
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

我尝试了http和https的方式。

我还尝试调用一些公共 api，例如“ https://facebook.github.io/react-native/movies.json ”，它可以正常工作。

从邮递员那里调用相同的网址，它可以正常工作。

在此处输入图像描述

我正在使用 .Net Core 3.0，这是我的 react native 项目的依赖项：

  "dependencies": {
"@expo/samples": "~36.0.0",
"@expo/vector-icons": "~10.0.0",
"@react-navigation/web": "~1.0.0-alpha.9",
"axios": "^0.19.1",
"expo": "~36.0.0",
"expo-asset": "~8.0.0",
"expo-constants": "~8.0.0",
"expo-font": "~8.0.0",
"expo-image-picker": "~8.0.0",
"expo-permissions": "~8.0.0",
"expo-web-browser": "~8.0.0",
"galio-framework": "^0.6.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-maps": "0.26.1",
"react-native-reanimated": "~1.4.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-signalr": "^1.0.6",
"react-native-web": "~0.11.7",
"react-navigation": "~4.0.10",
"react-navigation-stack": "~1.10.3",
"react-navigation-tabs": "~2.6.2",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

}

你能帮我找到解决这个问题的方法吗？先感谢您。

标签： react-nativeasp.net-coremobileaxiosasp.net-core-webapi

解决方案

您必须将您的 api 发布到 IIS。您无法使用http://localhost网址对其进行测试。首先使用 PostMan 或类似的应用程序测试您的 api，然后将其发布到本地 IIS。从 IIS 为其分配 ip。然后从您的应用程序中调用它，例如“ http://100.293.12.33 ”

推荐阅读