Axios no access-control-allow-origin header is present on the requested resource.

Q: Has been blocked by CORS policy no Access

[Solved] Axios request has been blocked by cors no Access-Control-Allow-Origin header is present on the requested resource. Solution 1: Access-Control-Allow-Origin is a response header - so in order to enable CORS - We need to add this header to the response from server.

I'll have a go at this complicated anycodings_axios subject.

Inhaltsverzeichnis Show

What is origin?
What has this got to do with CORS issues?
Localhost server example
How to fix things (One of the following)
Example flow
How do I add Access
How do you set no CORS in Axios?
How do I fix CORS header Access
Has been blocked by CORS policy no Access

What is origin?

The origin itself is the name of a host anycodings_axios (scheme, hostname, and port) i.g. anycodings_axios https://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 https://www.google.com, the origin of anycodings_axios the web page that is displayed to you is anycodings_axios https://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 https://website.example, that website anycodings_axios will have the origin of anycodings_axios https://website.example. This website anycodings_axios will most likely only fetch images, anycodings_axios icons, js files and do API calls towards anycodings_axios https://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 https://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.