The Student Room Group

Constantly facing CORS problem accessing file with javascript

1) I tried to access file using javascript with on my local pc and i get the error related to CORS with error message : Access to XMLHttpRequest at 'file:///xxx' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https..

Apparently for security reasons i am not able to do that . Does that mean if i convert my pc into a server and run the javascript server side it will be permitted? Are there any way around this?

2) I am learning how to call API function using javascript and i am trying out OneNote's API.

https://docs.microsoft.com/en-us/office/dev/add-ins/onenote/onenote-add-ins-programming-overview

Does it mean that i must host my javascript on a server to be able to call OneNote API and i cant do that using my desktop or else i would run into the some CORS problem?

3) I also tried to grab html code of a given link using ajax and failed again with error code : Access to XMLHttpRequest at 'https://.xxx' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is this also the similar situation with 1) where i need to run my javascript on a server in order to bypass CORS restriction?
Did you follow the steps with using Node.JS from the documentation? Or do you mean that you're using 'file:///' in your browser to point directly at an HTML file on the local filesystem?
https://docs.microsoft.com/en-us/office/dev/add-ins/onenote/onenote-add-ins-getting-started

The short answer is that yes you need to host your add-in on node.js (or another webserver, but node.js is really easy to use), but you don't need to "convert" your computer into a web server as-such, since node.js can just be run from the command-line to use as a development tool (by typing "npm start"), so you don't need to worry about having it running as a service, it'll just open a console window while it's running like any other console app.

There's a short explanation of what's happening when you try to run a web app from the local file system here: https://stackoverflow.com/questions/48362093/cors-request-blocked-in-locally-opened-html

If you can load your add-in from the node.js hosted webserver (e.g. https://localhost:3000/ ) then you should be able to get past this because unlike the filesystem, node.js will be able to handle the 'origin' HTTP request sent by the browser.


And yes, you can disable all of your browser's security if you absolutely must, but that wouldn't help you when you're trying to load the add-in into OneNote itself. -- e.g. disabling Chrome security: https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file
I really strongly recommend not doing this though - this is a bit of a 'nuclear' option - browser security is there to protect you against all kinds of stuff, and whatever you do with browser security disabled may not actually work when you finally do need to host it on a proper web server anyway, so there's probably not much point.
(edited 5 years ago)
Original post by winterscoming
Did you follow the steps with using Node.JS from the documentation? Or do you mean that you're using 'file:///' in your browser to point directly at an HTML file on the local filesystem?
https://docs.microsoft.com/en-us/office/dev/add-ins/onenote/onenote-add-ins-getting-started

The short answer is that yes you need to host your add-in on node.js (or another webserver, but node.js is really easy to use), but you don't need to "convert" your computer into a web server as-such, since node.js can just be run from the command-line to use as a development tool (by typing "npm start":wink:, so you don't need to worry about having it running as a service, it'll just open a console window while it's running like any other console app.

There's a short explanation of what's happening when you try to run a web app from the local file system here: https://stackoverflow.com/questions/48362093/cors-request-blocked-in-locally-opened-html

If you can load your add-in from the node.js hosted webserver (e.g. https://localhost:3000/ ) then you should be able to get past this because unlike the filesystem, node.js will be able to handle the 'origin' HTTP request sent by the browser.


And yes, you can disable all of your browser's security if you absolutely must, but that wouldn't help you when you're trying to load the add-in into OneNote itself. -- e.g. disabling Chrome security: https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file
I really strongly recommend not doing this though - this is a bit of a 'nuclear' option - browser security is there to protect you against all kinds of stuff, and whatever you do with browser security disabled may not actually work when you finally do need to host it on a proper web server anyway, so there's probably not much point.


the latter, i dont know how to use nodeJs .... yet . I just abduct the file using file:\\\
Original post by HucktheForde
the latter, i dont know how to use nodeJs .... yet . I just abduct the file using file:\\\

Don't worry if you don't know how to use it right now, since that microsoft site tells you exactly which commands to run anyway. It seemed to work for me - I just tried this and it only took a few minutes:

1. download and install node.js - the LTS version will be fine
2. run cmd.exe (command prompt)
3. enter the command npm install -g yo generator-office -- that's going to install the office add-in generator into node.js so that you can generate the boilerplate project files for a new app/add-in (You don't need to get anything from the yeoman website, those links are just for reference/documentation)
4. enter the command yo office and follow the menu options it describes on the page to create the add-in -- that will create the actual add-in folder containing stuff like the API and all the boilerplate like index.html, with the javascript files inside a 'src' folder.
5. if you called the add-in "My Office Add-in" then type cd "My Office Add-in" (that's where index.html will be as well as package.json and loads of other files/folders)
6. type npm start in the "My Office Add-in" folder to start the web service
7. Use the browser to Navigate to https://localhost:3000/ and tell the browser to ignore the lack of a certificate -- make sure you use https:// and not http:// because the add-in configuration is configured to use SSL rather than plain HTTP

That's pretty much it. I went as far as loading it in Chrome to make sure that worked although I didn't go as far as swapping out the example code or trying the final steps with OneNote, but the node.js stuff all worked fine anyway.
(edited 5 years ago)
Original post by winterscoming
Don't worry if you don't know how to use it right now, since that microsoft site tells you exactly which commands to run anyway. It seemed to work for me - I just tried this and it only took a few minutes:

1. download and install node.js - the LTS version will be fine
2. run cmd.exe (command prompt)
3. enter the command npm install -g yo generator-office -- that's going to install the office add-in generator into node.js so that you can generate the boilerplate project files for a new app/add-in (You don't need to get anything from the yeoman website, those links are just for reference/documentation)
4. enter the command yo office and follow the menu options it describes on the page to create the add-in -- that will create the actual add-in folder containing stuff like the API and all the boilerplate like index.html, with the javascript files inside a 'src' folder.
5. if you called the add-in "My Office Add-in" then type cd "My Office Add-in" (that's where index.html will be as well as package.json and loads of other files/folders)
6. type npm start in the "My Office Add-in" folder to start the web service
7. Use the browser to Navigate to https://localhost:3000/ and tell the browser to ignore the lack of a certificate -- make sure you use https:// and not http:// because the add-in configuration is configured to use SSL rather than plain HTTP

That's pretty much it. I went as far as loading it in Chrome to make sure that worked although I didn't go as far as swapping out the example code or trying the final steps with OneNote, but the node.js stuff all worked fine anyway.


So does that mean that nodeJS can help me access files on a local machine with javascript without having restriction issues?

just look up nodeJs it requires installation lol. And i thought this is something like vue / react / angular.
(edited 5 years ago)
Original post by HucktheForde
So does that mean that nodeJS can help me access files on a local machine with javascript without having restriction issues?

Sort of - Node.js is basically a javascript runtime environment (javascript interpreter) which has a built-in web server, so it means running the onenote add-in within the locally-running web server (which serves up content from a folder on the local filesystem), and then having the browser (or onenote) point to https://localhost:3000/ instead of a file:/// path.
(edited 5 years ago)

Quick Reply

Latest

Trending

Trending