CORS-Error executing Sage cell from within Vue

[Ingo Dahn]

When executing a sagecell within a Vue component within a Meteor framework running on an Ubuntu system in a Virtual Box environment on a Win10 Host I get the following error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sagecell.sagemath.org/kernel?CellSessionID=36a54493b6aa4e21b1ffbba0b86400fb&timeout=0&accepted_tos=true. (Reason: CORS request did not succeed). 

The full error message, referring to a line in ebedded_sagecell.js, is given below.

According to https://forums.meteor.com/t/how-to-fix-cors-access-control-allow-origin-error-in-meteor-app/1896, that doesn't seem to be a Meteor error.

I can, however, execute a sagecell in a page hosted in the virtual machine outside Meteor.

Any advice?

Full Error Message:

HMR You are using Vue 2.6.12 dev-client.js:17:8

You are currently in development mode. If the Hot-Module-Replacement system is enabled (`on` by default), the CSS will be injected to the page after the scripts are loaded. This may result in Flash Of Unstyled Contents. Those will not occur in production. dev-client.js:19:8

More information about the component compilation: https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component dev-client.js:21:8

Documentation and Issues: https://github.com/meteor-vue/vue-meteor dev-client.js:23:8

HMR Dev server URL: 10.0.2.15:3003 dev-client.js:107:10

If you have issues connecting to the dev server, set the 'HMR_URL' env variable to the URL of the dev server displayed in the meteor console. dev-client.js:109:10

Some cookies are misusing the recommended “SameSite“ attribute 5

HMR ⏺ Dev client connected dev-client.js:116:12

cell set embedded_sagecell.js:30934:13

starting timer from 1604399100732 embedded_sagecell.js:20175:17

Kernel: kernel_starting (null) embedded_sagecell.js:25485:21

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sagecell.sagemath.org/kernel?CellSessionID=36a54493b6aa4e21b1ffbba0b86400fb&timeout=0&accepted_tos=true. (Reason: header ‘x-xsrftoken’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sagecell.sagemath.org/kernel?CellSessionID=36a54493b6aa4e21b1ffbba0b86400fb&timeout=0&accepted_tos=true. (Reason: CORS request did not succeed).

Object { readyState: 0, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e), … }

embedded_sagecell.js:19412:17

API request failed (0): error embedded_sagecell.js:19414:17

Source map error: Error: request failed with status 404

Resource URL: https://sagecell.sagemath.org/embedded_sagecell.js

Source Map URL: underscore-min.map;

[Andrey Novoseltsev]

I wonder if this is the cause: "Reason: header ‘x-xsrftoken’ is not allowed" Do I have to explicitly list which headers are allowed?

Is it possible for you to setup a public page with this error that will make use of http://cosmos.mat.uam.es:8888/embedded_sagecell.js ? Then I can try to tweak responses to make it work.

Thank you!

Andrey

[Ingo Dahn]

Sorry, I cannot deploy my Meteor+Vue, but I could make it available as a git repo.

Meanwhile, I am exploring the possibilities to use Sagecell with Vue only (i.e. without Meteor), which I can do on Win10.

I succeeded in making up a Vue component with a Sagecell which can be configured by params. A page can contain several instances of that components and their Sage cells can be linked.

BUT - as usual in Vue - I want to load these components only when needed, which brings me to the following problem:

Suppose I have a page with several linked Sagecells and I add to that page a new cell. How can I link this cell to the already existing cells in order to work in the same environment?