0

I need help with this problem. My objective is to put a website inside a ReactJs web app. I tried using the iframe of ReactJs, it does not work.

Is there a way to use React Native WebView component inside a ReactJs web app? Or is there a Webview Component in ReactJs

I do want the end-user to jump to another tab in order to use the website. I want them to continue to stay in the ReactJs web app and use the website.

The website that I am putting is a .Net website and I am doing a ReactJs project, not a React Native Project

Jose Lora
  • 1,392
  • 4
  • 12
  • 18
Melvin Chua
  • 1

1 Answers1

0

simply using iframe should work as this exemple (source below) since your giving an url to this iframe langage doesn't matter if it can be served in http(s)

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
    return <iframe src="https://<website>/" />;
  }
}
ReactDOM.render(<App />, document.getElementById("container"));

As said in source the src url should be embeddable to be used inside an iframe if not you can use a reverse proxy to serve this url and change headers

source: https://blog.bitsrc.io/best-practices-in-using-iframes-with-react-6193feaa1e08

SCcagg5
  • 576
  • 3
  • 15
  • Hi, much thanks for the answer. i had tried this iframe method and i also followed this source as well. I came across the issue which the x-frame of the source website is set to "sameorgin" and i dont think its embedable. if using this iframe method, how to solve this issue? else is there any method which does not include iframe? – Melvin Chua Jan 13 '22 at 15:33
  • As said in source the src url should be embeddable to be used inside an iframe if not you can use a reverse proxy to serve this url and change headers nginx for instance https://stackoverflow.com/questions/45986631/how-to-enable-cors-in-nginx-proxy-server – SCcagg5 Jan 14 '22 at 17:22