You need to fetch the page using a web server so there is no "Access-Control-Allow-Origin" violation. When a script from example1.com
tries to make AJAX request on example2.com
, browsers first check if example2.com
allows access from other website. This is done by reading Access-Control-Allow-Origin
header of example2.com
. Most websites normally don't allow AJAX access.
In your case, the origin is file:///...
which won't be setting the Access-Control-Allow-Origin
header and since the default is to block the request, you get the error.
To get past this, do the following (Make sure you have ruby or python installed) -
- Open command prompt
- Use
cd
command to switch to your project directory (tutorial) Type either of the command
python -m SimpleHTTPServer for python
or
ruby -run -e httpd -- -p 8000 . for ruby.
This will run a basic HTTP server at port 8000. The HTTP server will allow access to files in the directory you have run the command from. So if you have, for e.g, index.html
in the directory, you could do http://localhost:8000/index.html
Looking at the screenshot, you can do this -
- Open command prompt
run
cd C:/Users/Jonny/Desktop/plunker
start server
python -m SimpleHTTPServer
- Open
http://localhost:8000/index.html#/invoices
in your browser.