如何使用Express-HTTP-Proxy从外部域代理iframe
我正在尝试在我的React网站上显示外部网站(例如zillow.com)的iframe,鉴于我无法访问或更改外部域的iframe的内容,我正在阅读我需要将网站代理到我的网站为了这样做。
因此,我安装了express-http-proxy
软件包,然后尝试了:
const express = require('express')
const proxy = require('express-http-proxy')
const server = express()
server.use('/zillowproxy', proxy('https://www.zillow.com/some-path'))
然后,在我的组件中,我正在尝试做:
import React from 'react'
export const ZillowPage = () => {
return <iframe src="/zillowproxy"></iframe>
}
在这一点上,我希望我可以访问内容iframe并能够添加事件侦听器,更改样式等。但是,我看到的是,iframe的内容不加载我期望加载的页面,而是在Zillow域上加载一个错误页面。
其次,我看到了很多错误:
从https://blah.zillow.com/path/to/resource'访问___ 原点“ https:// my-website”被CORS策略阻止:否 请求的“访问控制”标头 资源。
同样,我本来可以预料的,既然我据说代表外部资源,浏览器应该将其识别为相同的起源而不是跨原点,但我很可能会误解事物。
任何帮助将不胜感激。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论