Cross origin problem

Community Help
1

Can anybody help me with https://observablehq.com/@yloiko/vk-api
By click “VK Login” I want to open popup to login in vk.com, but browser close the popup with error(see bellow)

Untitled

2

Hi, it seems the server only accepts opening the login from the same site, not another. That’s why you have a crossorigin error.

3

Something like this appears to work:

VK = require("https://vk.com/js/api/openapi.js?161").catch(() => window.VK)

And then in another cell:

{
  VK.init({apiId: vk_app_id});
  VK.Auth.login();
}

Or perhaps you’d trigger the login call with a button click so that the popup isn’t prevented by the browser.

Related: you shouldn’t need the vkAsyncInit callback in Observable because any cell that references VK will automatically await for the library to load. But, you could put it inside the cell if you want.

VK = {
  window.vkAsyncInit = () => {
    window.VK.init({apiId: vk_app_id});
    window.VK.Auth.login();
  };
  return require("https://vk.com/js/api/openapi.js?161").catch(() => window.VK);
}

And lastly, we strongly recommend against selecting from the global document (document.querySelector) in Observable because the behavior is difficult to predict with Observable’s dataflow runtime. See Tom’s guide for more details:

1 Like
4

Yes, but how I can resolve the problem with this servece?

5

Hi, mike! I agree with rezpe, I think he accurately identified the problem, have I any way to resolve the problem.

6

It looks like you specified “https://observablehq.com” as your app domain because that path is currently returned as Access-Control-Allow-Origin header value by login.vk.com.

For security reasons Observable notebooks run in a different domain context than Observable’s frontend. Your notebooks are running at “https://yloiko.static.observableusercontent.com”, and this is the domain you need to specify for your app so that the correct CORS origin value is set by login.vk.com.