Vue axios post request blocked by CORS policy

Question

Vue axios post request

axios.post(`${this.host}:${this.port}/apiv2/login`, {
        body: {
          userName: this.user,
          password: this.pwd
        }
      });

resulted in ERROR:

Access to XMLHttpRequest at 'http://localhost:9047/apiv2/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

python requests, postman or simple curl does the job without errors

curl 'http://localhost:9047/apiv2/login' -H 'Content-Type: application/json' --data-binary '{"userName":"user","password":"pass"}'

UPDATE: Here my solution:

I added NodeJS server (localhost:8081). Now Vue (localhost:8080) is accessing NodeJS and NodeJS is quering Dremio API (localhost:9047).

The idea of having just static Vue app didn't work.

Does this answer your question? [Why doesn’t Postman get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when my JavaScript code does?](https://stackoverflow.com/questions/20035101/why-doesn-t-postman-get-a-no-access-control-allow-origin-header-is-present-on) — Tanner, Feb 18 '20 at 20:44
I query from vue (localhost:8080) a Dremio server api (localhost:9047) — Vikkes, Feb 18 '20 at 20:45

score -1 · Answer 1 · answered Feb 18 '20 at 19:56

-1

1st: Try add {'Access-Control-Allow-Origin': '*'} inside and then try again. If not work, then go to your "Localhost:8080" and set Access Control Origin to * then try first step again

answered Feb 18 '20 at 19:56

Wanming Hu

28
5

1

In production, this would make the server vulnerable to XSS. Not recommended. – Tanner Feb 18 '20 at 20:44
Yes, I mean if this step works, then continue to setup cors. – Wanming Hu Feb 22 '20 at 18:42

Vue axios post request blocked by CORS policy

1 Answers1