Tại sao ứng dụng React Native không kết nối được với API .NET nội bộ (Cách sửa lỗi)

Bạn vừa xây dựng xong một API Web .NET Core hoàn hảo. Bạn kiểm tra nó trên Swagger hoặc Postman và mọi thứ hoạt động trơn tru, dữ liệu được trả về ngay lập tức.

Tuy nhiên, khi bạn mở ứng dụng React Native Expo, viết một lệnh gọi đơn giản như axios.get('http://localhost:5257/api/users'), lưu lại và... 💥 Network Error.

Nếu bạn đang kiểm tra trên trình giả lập Android hoặc thiết bị thực, lỗi này có thể khiến bạn phát điên. Dưới đây là lý do chính xác tại sao nó xảy ra và cách thiết lập biến môi trường để khắc phục vĩnh viễn.

Vấn đề: "Localhost" là gì?

Khi bạn nhập localhost trong mã React Native, mã đó thực sự đang chạy bên trong thiết bị di động (hoặc trình giả lập).

• Đối với máy tính của bạn, localhost có nghĩa là chính máy tính đó.
• Đối với trình giả lập Android, localhost có nghĩa là mạng lặp nội bộ của thiết bị Android đó.

Trình giả lập đang tìm kiếm máy chủ .NET bên trong chính nó, nơi rõ ràng không tồn tại, dẫn đến thất bại và quăng ra lỗi Network Error.

Giải pháp: Các địa chỉ IP "thần thánh"

Để khắc phục sự cố này, bạn cần trỏ ứng dụng di động của mình đến địa chỉ mạng thực tế của máy tính, tùy thuộc vào thiết bị bạn đang kiểm tra.

1. Kiểm tra trên iOS Simulator (Mac)

Apple đã làm cho việc này trở nên rất dễ dàng. Trình giả lập iOS chia sẻ mạng của máy chủ.

• URL cần dùng: http://localhost:5257/api

2. Kiểm tra trên Android Emulator

Google xây dựng trình giả lập Android để chạy trên một bộ định tuyến ảo biệt lập. Để thoát khỏi bộ định tuyến đó và nói chuyện với localhost của máy tính, họ cung cấp một địa chỉ IP alias đặc biệt.

• URL cần dùng: http://10.0.2.2:5257/api

3. Kiểm tra trên thiết bị thực (iPhone hoặc Android qua Wi-Fi)

Nếu bạn đang chạy ứng dụng Expo trên điện thoại thực sự của mình, cả localhost và 10.0.2.2 đều sẽ không hoạt động. Điện thoại của bạn cần địa chỉ IP Wi-Fi cục bộ của máy tính.

Mở terminal và nhập ipconfig (Windows) hoặc ifconfig (Mac).

Tìm địa chỉ IPv4 của bạn (thường có dạng 192.168.1.X hoặc 10.0.0.X).

• URL cần dùng: http://192.168.1.X:5257/api

Lưu ý: Để cách này hoạt động, bạn phải đảm bảo ứng dụng .NET của bạn đang lắng nghe trên IP cục bộ, không chỉ là localhost. Bạn có thể thực hiện việc này bằng cách chạy lệnh dotnet run --urls "http://0.0.0.0:5257".

Thực hành tốt nhất: Cấu hình môi trường

Thay vì phải thay đổi URL Axios theo cách thủ công mỗi khi bạn chuyển từ iOS sang Android, hãy thiết lập một cấu hình động.

Nếu bạn đang sử dụng Expo, hãy tạo một tệp .env tại thư mục gốc của dự án:

# Thay đổi dòng này tùy thuộc vào thiết bị bạn đang test!
# iOS Simulator
# EXPO_PUBLIC_API_URL=http://localhost:5257/api

# Android Emulator
EXPO_PUBLIC_API_URL=http://10.0.2.2:5257/api

# Physical Device (Thiết bị thật)
# EXPO_PUBLIC_API_URL=http://192.168.1.45:5257/api

Sau đó, cấu hình instance Axios của bạn một lần duy nhất và không cần chạm vào nó nữa:

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;

Bây giờ, mỗi khi bạn chuyển đổi thiết bị kiểm tra, bạn chỉ cần bỏ ghi chú (uncomment) dòng tương ứng trong tệp .env, khởi động lại máy chủ Expo bằng lệnh npx expo start -c (để xóa bộ nhớ đệm) và API của bạn sẽ kết nối hoàn hảo.

Hy vọng mẹo nhỏ này giúp bạn tiết kiệm được vài giờ gỡ rối (debug)!