3

(also posted in https://github.com/facebook/react-native/issues/20989)

I am trying to render WebView in a React Native application, and I get "Invalid CORS request" error.

I have read several discussions of this (e.g. Android Webview: disable CORS), but none is involving React Native. Is there any way to overcome this problem in React Native?

Here is the render code:

return (
      <View style={styles.container}>
        <WebView style={styles.webview}
            source={{
              uri: uri,
              method: 'POST',
              body: `apiKey=${apiKey}&broker=${broker}` }}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            startInLoadingState={false}
            scalesPageToFit={true} />
      </View>
    );
Yossi
  • 5,577
  • 7
  • 41
  • 76
  • I don't see how you can make CORS requests through a webview if the server you're trying to reach doesn't allow it. Maybe you could try to make the request outside of your webview using fetch and then feed the result to the webview as html. – needsleep Sep 13 '18 at 19:02
  • The result are a set of keys and values... Nothing that fits in html. The thing I don't understand is: CORS issues are pretty common, and webview is something that is used pretty often with react native. His come people don't face similar problems? I didn't find any discussing about this. – Yossi Sep 13 '18 at 19:45
  • Please see also https://stackoverflow.com/questions/52317562/invalid-cors-request-in-webview-used-in-react-native – Yossi Sep 13 '18 at 19:46
  • Sorry let me understand something. The request you're making returns json data and not html? Why do you need it to be inside a webview? Is it possible to share the url you're trying to post? – needsleep Sep 13 '18 at 20:07
  • I am trying to integrate with the JSON API from https://www.trade.it/documentation. My problem is when I am trying to call getOAuthLoginPopupUrlForWebApp. My understanding is that I need to use webview since this http request is supposed to open an authentication form. My next challenge will be to get in my app the post message sent when the authentication is done. As you can see, there is also an android sdk available, but I decided to use the JSON API since there is no react native interface. You can try it yourself, if you like, by signing up in this site. Thanks :) – Yossi Sep 13 '18 at 21:55
  • I see! So, my opinion is you should contact the trade.it support and notify them of this issue. This is definitely not a react/react-native problem but theirs. It doesn't even work on a web browser using their qa environment and you even get the same invalid CORS message if you run their sample app. I'm sure you'll be doing them a favour debugging their API :) – needsleep Sep 14 '18 at 07:38
  • Please take a look at https://stackoverflow.com/questions/52317562/invalid-cors-request-in-webview-used-in-react-native ; the strange thing is that axios.post is successful. Which means that the problem may be in webview. I would expect axios.post to have a CORS error, too. I contacted trade.it but they claim that their customers that develop apps use their android or ios sdk, not the web interface. – Yossi Sep 14 '18 at 10:15
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180047/discussion-between-needsleep-and-yossi). – needsleep Sep 14 '18 at 11:22

0 Answers0