I am trying to display an iframe for an external website in my React website and given that I cannot alter the contents of an iframe for external domains, I may need to proxy the website into mine.
I installed the express-http-proxy package and tried:
const express = require('express')
const proxy = require('express-http-proxy')
const server = express()
server.use('/zillowproxy', proxy('https://www.zillow.com/some-path'))
Then, in my component, I'm trying:
import React from 'react'
export const ZillowPage = () => {
return <iframe src="/zillowproxy"></iframe>
}
I would expect that I could have access to the contents of the iframe and be able to add event listeners, change styles, etc. However, what I'm seeing is that the contents of the iframe does not load the page I would expect to load but instead loads an error page on the Zillow domain.
Secondly, I'm seeing quite a few errors like:
Access to ___ at 'https://blah.zillow.com/path/to/resource' from origin 'https://my-website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I would have expected that since I'm supposedly proxying the external resource, that the browser should recognize it as the same origin rather than cross origin.
<script src="https://www.zillow.com/some-path/script.js">with absolute URLs. Depending of the type of resource, these count as cross-origin as well. The problem is that your proxy does not (or cannot) rewrite these absolute URLs.