React Native fetch () Yêu cầu mạng không thành công

Khi tôi tạo một dự án hoàn toàn mới bằng cách sử dụng react-native init(phiên bản RN 0.29.1) và đặt một tìm nạp trong phương thức kết xuất vào API phim demo facebook công khai, nó sẽ ném a Network Request Failed. Có một dấu vết ngăn xếp rất vô dụng và tôi không thể gỡ lỗi các yêu cầu mạng trong bảng điều khiển chrome. Đây là tìm nạp tôi đang gửi:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

Vấn đề ở đây là iOS không cho phép các yêu cầu HTTP theo mặc định, chỉ có HTTPS. Nếu bạn muốn bật yêu cầu HTTP, hãy thêm điều này vào info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Không nên cho phép tất cả các tên miền cho http. Tạo một ngoại lệ cho chỉ các lĩnh vực cần thiết.

Nguồn: Định cấu hình ngoại lệ bảo mật vận chuyển ứng dụng trong iOS 9 và OSX 10.11

Thêm phần sau vào tệp info.plist của ứng dụng của bạn:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

Tôi đã sử dụng localhostcho địa chỉ, điều này rõ ràng là sai. Sau khi thay thế nó bằng địa chỉ IP của máy chủ (trong mạng mà trình giả lập), nó đã hoạt động hoàn hảo.

Biên tập

Trong Trình giả lập Android, địa chỉ của máy phát triển là 10.0.2.2. Giải thích thêm tại đây

Đối với Genymotion, địa chỉ là 10.0.3.2. Thêm thông tin ở đây

Đối với chúng tôi, đó là vì chúng tôi đã tải lên một tệp và tệp RNPicker không cung cấp loại mime thích hợp. Nó chỉ cho chúng tôi "hình ảnh" là loại. Chúng tôi cần thay đổi nó thành 'image / jpg' để tải xuống hoạt động.

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })

React Native Docs đưa ra câu trả lời cho điều này.

Apple đã chặn tải tài nguyên HTTP rõ ràng ẩn. Vì vậy, chúng ta cần thêm tệp Info.plist (hoặc tương đương) sau đây của dự án.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Phản ứng Tài liệu gốc -> Tích hợp với các ứng dụng hiện có -> Kiểm tra tích hợp của bạn -> Thêm ngoại lệ Bảo mật vận chuyển ứng dụng

Vấn đề có thể là trong cấu hình máy chủ.

Android 7.0 có một lỗi được mô tả ở đây . Giải pháp được đề xuất bởi Vicky Chijwani:

Định cấu hình máy chủ của bạn để sử dụng đường cong elliptic Prime256v1. Ví dụ: trong Nginx 1.10, bạn thực hiện việc này bằng cách đặt ssl_ecdh_curve Prime256v1;

Tôi gặp vấn đề tương tự trên Android nhưng tôi đã tìm được giải pháp cho nó. Android đang chặn lưu lượng văn bản rõ ràng (không yêu cầu https) kể từ API cấp 28 theo mặc định. Tuy nhiên, android/app/src/debug/res/xml/react_native_config.xmlReac -igen thêm cấu hình bảo mật mạng vào phiên bản gỡ lỗi ( ) xác định một số tên miền (localhost và IP máy chủ cho AVD / Genymotion), có thể được sử dụng mà không cần SSL trong chế độ dev. Bạn có thể thêm tên miền của mình ở đó để cho phép các yêu cầu http.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">dev.local</domain>
  </domain-config>
</network-security-config>

Tôi gặp vấn đề tương tự trên Android 9 vì "http" và vấn đề được giải quyết bằng cách chỉ cần thêm android: usedCleartextTraffic = "true" trong AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

Tôi đã gặp vấn đề tương tự trên Trình giả lập Android, nơi tôi đã cố gắng truy cập URL HTTPS bên ngoài bằng chứng chỉ hợp lệ. Nhưng việc tìm kiếm URL đó trong phản ứng gốc không thành công

'fetch error:', { [TypeError: Network request failed]
sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

1) Để tìm ra lỗi chính xác trong nhật ký, trước tiên tôi đã bật 'Gỡ lỗi JS từ xa' bằng Cmd + M trên ứng dụng

2) Lỗi được báo cáo là

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

3) Tôi đã thêm chứng chỉ hợp lệ của URL bằng phương pháp này -> BƯỚC 2

http://lpains.net/articles/2018/install-root-ca-in-android/

Chứng chỉ này được thêm vào tab Người dùng.

4) Thêm thuộc android:networkSecurityConfigtính thuộc tính vào AndroidManifest.xml

Thêm tệp cấu hình bảo mật mạng res/xml/network_security_config.xml:

<network-security-config>
    <base-config>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>

Điều này sẽ làm việc và cung cấp cho bạn một phản ứng mong đợi.

Tôi đã gặp vấn đề này cho Android-

URL- localhost / authToken.json - không hoạt động :(

URL- 10.106.105.103/authToken.json - không hoạt động :(

URL- http://10.106.105.103/authToken.json - đã hoạt động :): D

Lưu ý- Sử dụng ifconfigtrên Linux hoặc ipconfigtrên Windows để tìm máy IpAddress

Đối với người dùng Android:

1. Thay thế localhosts thành địa chỉ IP Lan vì khi bạn chạy dự án trên thiết bị Android, localhost sẽ trỏ đến thiết bị Android, thay vì máy tính của bạn, ví dụ: thay đổi http://localostthànhhttp://192.168.1.123

2. Nếu URL yêu cầu của bạn là HTTPS và thiết bị Android của bạn được ủy quyền, giả sử bạn đã cài đặt CA do người dùng thêm (như CA của bộ công cụ hoặc CA của Charles) trong thiết bị Android của bạn, hãy đảm bảo rằng phiên bản Android của bạn nằm dưới Nougat (7.0) , bởi vì : Thay đổi đối với Nhà chức trách chứng chỉ tin cậy trong Android Nougat
   

   CA do người dùng thêm
   Bảo vệ tất cả dữ liệu ứng dụng là mục tiêu chính của hộp cát ứng dụng Android. Android Nougat thay đổi cách các ứng dụng tương tác với các CA do người dùng và quản trị viên cung cấp. Theo mặc định, các ứng dụng nhắm mục tiêu API cấp 24 sẽ được thiết kế bởi vì không tôn trọng các CA như vậy trừ khi ứng dụng hoàn toàn áp dụng. Cài đặt mặc định an toàn này làm giảm bề mặt tấn công ứng dụng và khuyến khích xử lý nhất quán dữ liệu ứng dụng dựa trên mạng và tệp.

Đối với Android, bạn có thể đã bỏ lỡ để thêm quyền trong AndroidManifest.xml Cần thêm quyền sau.

<uses-permission android:name="android.permission.INTERNET" /> 

Tôi có vấn đề tương tự. Trong trường hợp của tôi, yêu cầu đến localhost đang hoạt động và đột nhiên dừng lại. Hóa ra vấn đề là tôi đã tắt wifi trên điện thoại Android.

Điều này làm việc với tôi, android sử dụng một loại địa chỉ IP đặc biệt 10.0.2.2 sau đó là số cổng

import { Platform } from 'react-native';

export const baseUrl = Platform.OS === 'android' ?
    'http://10.0.2.2:3000/'
: 
'http://localhost:3000/';

nếu bạn sử dụng docker cho REST api, trường hợp làm việc với tôi là thay thế tên máy chủ: http://demo.test/apibằng địa chỉ ip của máy : http://x.x.x.x/api. Bạn có thể lấy IP từ việc kiểm tra ipv4 nào bạn có trên mạng không dây. Bạn cũng nên có wifi từ điện thoại trên.

Bạn nên xử lý trường hợp lỗi trong .then để tìm nạp API.

Ví dụ:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});

1. Thêm android:usesCleartextTraffic="true"dòng trong AndroidManifest.xml.

2. Xóa tất cả thư mục gỡ lỗi khỏi thư mục Android của bạn.

Chỉ cần bạn có Thay đổi trong Tìm nạp ....

fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
        /*return responseJson.movies; */
        alert("result:"+JSON.stringify(responseJson))
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseJson)
        })
     }).catch((error) => {
         console.error(error);
     });

Đối với thiết bị Android, hãy chuyển đến thư mục gốc dự án của bạn và chạy lệnh:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

ví dụ, adb reverse tcp:8088 tcp:8088

Điều này sẽ làm cho thiết bị vật lý của bạn (tức là điện thoại Android) lắng nghe máy chủ localhost chạy trên máy phát triển của bạn (tức là máy tính của bạn) trên địa chỉ http: // localhost: [your_own_server_port] .

Sau đó, bạn có thể trực tiếp sử dụng http:localhost:[your_port] /your_apitrong fetch(cuộc gọi phản ứng gốc của mình .

Đối với Android, hãy thêm android: networkSecurityConfig = "@ xml / network_security_config" vào thẻ ứng dụng trong AndroidManifest.xml, như thế này:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>

Nội dung tệp network_security_config.xml:

<?xml version='1.0' encoding='utf-8'?>
<network-security-config>
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>

<!-- let application to use http request -->
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

Thí dụ:

return fetch('http://<your ip>')
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(responseJson)
  })
  .catch((error) => {
    console.error(error);
  });