I'll have a go at this complicated anycodings_axios subject.
What is origin?
The origin itself is the name of a host anycodings_axios (scheme, hostname, and port) i.g. anycodings_axios //www.google.com or could be a anycodings_axios locally opened file file:// etc.. It is anycodings_axios where something (i.g. a web page) anycodings_axios originated from. When you open your web anycodings_axios browser and go to anycodings_axios //www.google.com, the origin of anycodings_axios the web page that is displayed to you is anycodings_axios //www.google.com. You can see this anycodings_axios in Chrome Dev Tools under Security:
The same applies for if you open a local anycodings_axios HTML file via your file explorer (which anycodings_axios is not served via a server):
What has this got to do with CORS issues?
When you open your browser and go to anycodings_axios //website.example, that website anycodings_axios will have the origin of anycodings_axios //website.example. This website anycodings_axios will most likely only fetch images, anycodings_axios icons, js files and do API calls towards anycodings_axios //website.example, basically it is anycodings_axios calling the same server as it was served anycodings_axios from. It is doing calls to the same anycodings_axios origin.
If you open your web browser and open a anycodings_axios local HTML file and in that HTML file anycodings_axios there is JavaScript which wants to do a anycodings_axios request to Google for example, you get anycodings_axios the following error:
The same-origin policy tells the browser anycodings_axios to block cross-origin requests. In this anycodings_axios instance origin null is trying to do a anycodings_axios request to //www.google.com (a anycodings_axios cross-origin request). The browser will anycodings_axios not allow this because of the CORS anycodings_axios Policy which is set and that policy is anycodings_axios that cross-origin requests is not anycodings_axios allowed.
Same applies for if my page was served anycodings_axios from a server on localhost:
Localhost server example
If we host our own localhost API server anycodings_axios running on localhost:3000 with the anycodings_axios following code:
const express = require('express') const app = express() app.use(express.static('public')) app.get('/hello', function (req, res) { // res.header("Access-Control-Allow-Origin", "*"); res.send('Hello World'); }) app.listen(3000, () => { console.log('alive'); })And open a HTML file (that does a anycodings_axios request to the localhost:3000 server) anycodings_axios directory from the file explorer the anycodings_axios following error will happen:
Since the web page was not served from anycodings_axios the localhost server on localhost:3000 anycodings_axios and via the file explorer the origin is anycodings_axios not the same as the server API origin, anycodings_axios hence a cross-origin request is being anycodings_axios attempted. The browser is stopping this anycodings_axios attempt due to CORS Policy.
But if we uncomment the commented line:
const express = require('express') const app = express() app.use(express.static('public')) app.get('/hello', function (req, res) { res.header("Access-Control-Allow-Origin", "*"); res.send('Hello World'); }) app.listen(3000, () => { console.log('alive'); })And now try again:
It works, because the server which sends anycodings_axios the HTTP response included now a header anycodings_axios stating that it is OK for cross-origin anycodings_axios requests to happen to the server, this anycodings_axios means the browser will let it happen, anycodings_axios hence no error.
How to fix things (One of the following)
- Serve the page from the same origin as where the requests you are making reside (same host).
- Allow the server to receive cross-origin requests by explicitly stating it in the response headers.
- If using a reverse proxy such as Nginx, configure Nginx to send response headers that allow CORS.
- Don't use a browser. Use cURL for example, it doesn't care about CORS Policies like browsers do and will get you what you want.
Example flow
Following is taken from: Cross-Origin anycodings_axios Resource Sharing (CORS)
Remember, the same-origin policy tells anycodings_axios the browser to block cross-origin anycodings_axios requests. When you want to get a public anycodings_axios resource from a different origin, the anycodings_axios resource-providing server needs to tell anycodings_axios the browser "This origin where the anycodings_axios request is coming from can access anycodings_axios my resource". The browser remembers that anycodings_axios and allows cross-origin anycodings_axios resource sharing.
Step 1: client (browser) request When anycodings_axios the browser is making a cross-origin anycodings_axios request, the browser adds an Origin anycodings_axios header with the current origin (scheme, anycodings_axios host, and port).
Step 2: server response On the server anycodings_axios side, when a server sees this header, anycodings_axios and wants to allow access, it needs to anycodings_axios add an Access-Control-Allow-Origin anycodings_axios header to the response specifying anycodings_axios the requesting origin (or * to allow any anycodings_axios origin.)
Step 3: browser receives response When anycodings_axios the browser sees this response with an anycodings_axios appropriate Access-Control-Allow-Origin anycodings_axios header, the browser allows the response anycodings_axios data to be shared with the client site.
More links
Here is another good answer, more anycodings_axios detailed as to what is happening: anycodings_axios //stackoverflow.com/a/10636765/1137669