0

I am trying to display an iframe for an external website (e.g. zillow.com) in my React website and given that I cannot access or alter the contents of an iframe for external domains, I was reading that I need to proxy the website into mine in order to do so.

Therefore, I installed the express-http-proxy package and have 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 to do:

import React from 'react'

export const ZillowPage = () => {
    return <iframe src="/zillowproxy"></iframe>
}

At this point, 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 of the sort:

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.

Again, 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 but I very well may be misunderstanding things.

Any help would be greatly appreciated.

noblerare
  • 10,277
  • 23
  • 78
  • 140
  • The HTML page in your iframe is proxied, but it probably loads additional resources like ` – Heiko Theißen Jun 01 '22 at 15:24
  • Hm, that makes sense. So is there a way to also proxy those absolute URLs as well? – noblerare Jun 01 '22 at 15:29
  • That depends on how the Zillow page generates these URLs. It cannot be solved by you alone. – Heiko Theißen Jun 01 '22 at 15:31

0 Answers0