CORS : localhost에 대한 http 요청이 react-native로 거부되었습니다.

포트 8080에서 실행되는 CORS 헤더를 지원하는 Express.js 서버가 있으며, iPhone 5의 React Native 앱에서 해당 포트로 http 요청을 보내려고합니다.CORS : localhost에 대한 http 요청이 react-native로 거부되었습니다.

import request from 'superagent' 

const getMarkers = (url, callback) => { 
    request 
    .get(url) 
    .set('Accept', 'application/json') 
    .end(callback) 
} 

getMarkers('localhost:8080/markers, this.handleMarkers)

그리고 내 익스프레스 미들웨어는 다음과 같습니다 :

[Error: Request has been terminated 
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.]

요청은 다음과 같습니다

app.use((req, res, next) => { 
    res.header('Access-Control-Allow-Origin', '*') 
    res.header('Access-Control-Allow-Headers', 
    'Origin, X-Requested-With, Content-Type, Accept') 
    next() 
})

,536하지만 다음과 같은 오류를 얻고있다

내 프로젝트에 '임의로드'를 허용했습니다.

이러한 요청은 ios 시뮬레이터를 사용할 때 올바르게 실행됩니다. 또한 ngrok를 다운로드하고 익스프레스 서버 디렉토리에서 실행하고 ngrok에서 제공 한 https 주소로 클라이언트 측 요청을하면 이러한 요청이 올바르게 실행됩니다.

제 질문은 : ngrok와 같은 것을 사용하지 않고 이러한 요청을 어떻게 처리 할 수 있습니까? 가능한 경우 http 및 localhost를 사용하여 신속하게 개발할 수 있기를 바랍니다. 다른 사람들이이 질문에 제공 할 수있는 통찰력에 대해 매우 감사하게 생각합니다! 내가 믿는

출처

2017-03-14 duhaime

이 당신의 문제 : 명시 앱

: 경우

App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.

ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the NSAllowsArbitraryLoads entry from your Info.plist file in the ios/ folder.

<key>NSAppTransportSecurity</key> 
<dict> 
    <key>NSAllowsArbitraryLoads</key> 
    <true/> 
    <key>NSExceptionDomains</key> 
    <dict> 
     <key>**YOUR DOMAIN HERE**</key> 
     <dict> 
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> 
      <true/> 
     </dict> 
    </dict> 
</dict>

출처

2017-03-14 20:13:31

감사합니다. @MattAft. 난 혼란 스러워요 - 나는 설정이 임의의로드를 허용하면 HTTP 요청을 할 수 있다고 생각했는데, 이것이 내가 원하는 것입니다. 나는 틀린가? – duhaime

네가 네가 그것을 허용하기 위해 켜기를 바랄거야. 하지만 원하는 도메인을 설정해야합니다. 아프면 내 대답을 작동하도록 만들기 위해 업데이트하십시오. –

굉장합니다, 고마워요. 나는 ' localhost'과 같은 것을 가지고있다. 그러나 여전히 localhost에 http 요청을 할 수 없다. 내가 뭘 더 시도할지 알아? – duhaime

그것이 버그, 여기에 몇 가지 내가 도움이 발견 작업-A-라운드는
- 명시 적으로 HTTP 헤더 추가 시도 : "X-Requested-With": "XMLHttpRequest"
- 가끔씩 127.0.0.1 대신 IP 0.0.0.0에서 실행되는 서버를 설정해야합니다.

반응 네이티브 응용 프로그램의 경우 :
-127.0.0.1을 사용해야하는 경험이 있거나 요청할 때 특정 호스트의 이름 (localhost를 사용하는 것보다)이있었습니다.

출처

2017-03-14 23:42:41

CORS : localhost에 대한 http 요청이 react-native로 거부되었습니다.

답변

관련 문제