Question

在我的应用程序中，我正在弹出一个窗口，稍后我通过下面的代码定期查看该新打开的窗口的当前url，但是它给出了以下错误阻止了一个原点为“ http://localhost:63830”的框架”访问跨域框架。如何解决这个问题

 var _url =
        "https://us.lightspeedapp.com/oauth/authorize.php?response_type=code&client_id=8f2a3974b288e34327ad5564b2f7c0c5f7e28103893479b1e53a957b5de2e0ff&scope=employee:all";

    var loggedIn = false;
    var win = window.open(_url, "windowname1", 'width=800, height=600');


    var pollTimer = window.setInterval(function () {
        try {
            debugger;
            console.log(win.document.URL);
            if (win.document.URL.indexOf(REDIRECT) != -1) {
                window.clearInterval(pollTimer);
                var url = win.document.URL;
                win.close();


            }
        } catch (e) {
        }
    }, 500);

    e.preventDefault();

}

Answer 1

您收到此错误消息是因为提供HTML文件的服务器位于与您要调用的AJAX网址不同的域下。

有多种处理方法。

详细了解CORS standard loss function。

我不知道您在该服务器上使用的编程语言 us.lightspeedapp.com ，但是正如您所写的，您正在计算机上进行本地开发，并且正在运行可提供HTML文件的网络服务器

您需要在 us.lightspeedapp.com 的响应中添加 HTTP标头。

进行跨域AJAX调用的访问者浏览器在执行实际的POST，GET或其他调用之前先进行 OPTION HTTP调用。

此 OPTION 调用告诉浏览器服务器是否可以接受该来源的请求。

请求->响应可能看起来像这样（取决于您的需要）。

请求标头（访问者浏览器）

OPTIONS /oauth/authorize.php
Access-Control-Request-Method: POST
Access-Control-Request-Headers: origin, x-requested-with
Origin: http://localhost:63830

响应标题（网络服务器）

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: x-myapikey, x-userid
Access-Control-Max-Age: 86400

重要！ Access-Control-Allow-Origin 标头也需要匹配的协议（http，https）！您还可以在该服务器上创建一个源白名单，并将请求 Origin 标头与此白名单进行比较，然后将条目添加到响应标头（如果找到），或者使用401不允许。

玩得开心！

阻止源为“ http：// localhost：63830”的框架访问跨域框架

1 个答案: