CORS：对本地主机的HTTP请求被react-native拒绝

Question

I have an Express.js server that supports CORS headers running on port 8080, and am trying to make http requests to that port from a React Native app on an iPhone 5, but am getting the following error:

[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.]

The request looks like this:

import request from 'superagent'

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

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

And my Express middleware looks like this:

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()
})

I have allowed 'arbitrary loads' for my project.

These requests run fine when I use the ios Simulator. Also, these requests run fine when I download ngrok, run it in my express server directory, and make the client side requests to the https address provided by ngrok.

My question is: How can I facilitate these requests without using something like ngrok? I'd like to be able to develop quickly using only http and localhost if possible. I'd be very grateful for any insight others can offer on this question!

Answer 1

I believe this is your issue:

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>

Answer 2

In case it's a bug, here are some work-a-rounds I have found helpful:

For the express app:
-Try explicitly adding the http headers: "X-Requested-With": "XMLHttpRequest"
-I have sometimes needed to set my server running on IP 0.0.0.0 instead of 127.0.0.1

For the react-native app:
-I have had experiences where I needed to use 127.0.0.1, or the name of the specific host when making requests (versus using localhost).