我试图在我的网站中使用iframe在React应用程序中加载第三方网站。我没有访问第三方网站服务器的权限，因此无法在CORS策略中请求他们添加我的域名。第三方网站的初始页面加载成功，但当我尝试登录第三方网站时，CORS错误结束。我尝试了以下几种方法，但都没有成功：
1.使用http-proxy-middleware制作代理服务器。
1.尝试使用JSONP绕过CORS限制
1.我也试过设置cookie。
有人在互联网上称这个问题是由CSRF令牌引起的，CSRF令牌是在服务器端实现的，它为每个用户会话生成一个唯一的令牌，以防止跨站点请求伪造攻击，在这种情况下，我们不能创建完全相同的唯一令牌。
请帮我解决这个问题。任何建议/解决方案将不胜感激。先谢谢你了！！
1条答案
按热度按时间sauutmhj1#
当你试图在React应用程序中的iframe中加载第三方网站时，你无法访问第三方网站的服务器，只有有限的选项可以绕过此限制。您提到的解决方案（代理服务器、JSONP和Cookie）可能无法在此场景中工作。
CORS（Cross-Origin Resource Sharing）是一种由Web浏览器强制执行的安全机制，它限制跨域请求，以保护用户免受恶意攻击。如果第三方网站的服务器没有将您的域添加到其CORS策略中，浏览器将阻止您的React应用程序对该网站的请求。
在CSRF令牌保护的情况下，服务器期望与每个请求沿着发送唯一的令牌以验证其真实性。如果不能访问服务器及其实现细节，生成服务器所需的完全相同的令牌将是一个挑战。
考虑到这些局限性，以下是解决该问题的一些建议：
1.联系第三方网站：联系第三方网站的所有者或管理员，并解释您的情况。请求他们将您的域明确添加到其CORS策略中。如果他们愿意合作，他们可能会在服务器上进行必要的调整，以允许来自您域的跨域请求。
1.考虑其他集成方法：如果第三方网站提供了API或其他集成选项，您可以探索这些选项，而不是使用iframe。
1.考虑其他架构方法：根据应用程序的特定要求和限制，您可能需要考虑替代架构方法，以避免在iframe中加载第三方网站。
1.尝试使用https://iframetester.com/验证iframe中的第三方应用程序。
重要的是要注意，在没有第三方网站服务器合作的情况下解决CORS限制可能具有挑战性，因为它违背了预期的安全措施。建议您联系网站所有者或管理员寻求帮助，并在可能的情况下探索其他集成方法。