62

I build an app use vue and codeigniter, but I have a problem when I try to get api, I got this error on console

Access to XMLHttpRequest at 'http://localhost:8888/project/login' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field access-control-allow-origin is not allowed 
by Access-Control-Allow-Headers in preflight response.

I have been try like this on front-end (main.js)

axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

and this on backend (controller)

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

and vue login method

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

I've searched and tried in stackoverflow but does not work, how I can solve it? thank you so much for your help

Ashtav
  • 2,586
  • 7
  • 28
  • 44

11 Answers11

45

CORS is the server telling the client what kind of HTTP requests the client is allowed to make. Anytime you see a Access-Control-Allow-* header, those should be sent by the server, NOT the client. The server is "allowing" the client to send certain headers. It doesn't make sense for the client to give itself permission. So remove these headers from your frontend code.

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          // remove headers
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

For example, imagine your backend set this cors header.

header("Access-Control-Allow-Methods: GET");

That means a client from a different origin is only allowed to send GET requests, so axios.get would work, axios.post would fail, axios.delete would fail, etc.

Eric Guan
  • 15,474
  • 8
  • 50
  • 61
  • 14
    error.. i got.. `CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.` – aswzen Jul 13 '20 at 07:30
  • 2
    Thanks, +1 for stating the client requests should not have these headers. I did not know that until now. – J. Unkrass Apr 20 '21 at 09:53
27

This may occur you are trying call another host for ex- You Vue app is running on localhost:8080 but your backend API is running on http://localhost:8888 In this situation axios request looking for this localhost:8080/project/login instead of this http://localhost:8888/project/login

To solve this issue you need to create proxy in your vue app

Follow this instruction Create js file vue.config.js or webpack.config.js if you haven't it yet inside root folder

then include below

module.exports = {
 devServer: {
     proxy: 'https://localhost:8888'
 } }

If you need multiple backends use below

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true,
            pathRewrite: {
                '^/V1': ''
            }
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true,
            pathRewrite: {
                '^/V2': ''
            }
        },
        
    }
}

If you select the second one in front of the end point use the V1 or V2 ex - your end point is /project/login before it use V1/project/login or V2/project/login as per the host

Check this Vue project - https://github.com/ashanoulu/helsinki_city_bike_app/tree/main/Front_End/app-view Version - Vue3

For more details visit - Vue official documentation

Chameera W. Ashan
  • 346
  • 4
  • 7
  • 3
    Thank you! It perfectly works. I added the `devServer` in my `vue.config.js` file, inside the `configureWebpack` object (which is at the same level of `publicPath`). – JCarlosR Aug 15 '20 at 18:21
  • 1
    Hi, I have added devServer, but when I build the project, the cors error shows. And the request use http instead of https. – David Chan Nov 23 '20 at 06:30
  • 2
    Could you add some example AJAX requests so I can understand the use case here a bit more with the prefixes /V1 and /V2? – Jonathan Oct 13 '21 at 21:41
  • I really dont get it... Why vue doesn't apply proper cors headers when I just do `axios.get('http://localhost:8888')` ? – Takoo Apr 20 '23 at 08:47
9

in my case curl && postman works but not vue axios.post

Access to XMLHttpRequest at 'http://%%%%:9200/lead/_search' from origin 'http://%%%%.local' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

So, the issue is on vue side not the server!

The server response contains "access-control-allow-origin: *" header

Sil2
  • 119
  • 1
  • 2
  • 5
    CORS policies are to restrict calls from browsers , so if you have set CORS on your server it means that your restricted from which URLs a browser can make a request to your server. Whatever CORS you set on server you still can make requests from Postman because it's not a browser. – Taras Kryvko Mar 26 '20 at 17:15
7

I had the same problem even everything was fine on the server side..

The solution to the problem was that API link I hit was missing the slash (/) at the end so that produced CORS error.

hljubic
  • 89
  • 1
  • 3
  • 4
    This was also my problem, but how can that be the solution? – fses91 Sep 19 '20 at 16:30
  • 1
    Are you kidding me? I spent 1 hour trying to fix it and nothing around stackoverflow fixed my problem as your answer, adding an slash at the end of the url fixed my problem too, how that can be the solution? – Fernando Torres Jul 21 '21 at 23:36
4

in my case adding this in my php backend API function it worked

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, post, get');
        header("Access-Control-Max-Age", "3600");
        header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
        header("Access-Control-Allow-Credentials", "true");
Kunal Rajput
  • 664
  • 1
  • 7
  • 21
1

Dev Proxy is your solution

With DevProxy you define a specific path, or a wildcard (non static) that Node (the server runs vue-cli dev server) will route traffic to.

Once defined (a single entry in vue.config.js), you call your api with the same URI as your UI (same host and port) and Vue is redirecting the request to the API server while providing the proper CORS headers.

look more at https://cli.vuejs.org/config/#devserver-proxy

Tzury Bar Yochay
  • 8,798
  • 5
  • 49
  • 73
  • 3
    This is a practically link-only, i.e. practically not explained and extremely shortened copy of an existing answer. Please make more obvious the addtional insight this answer provides. – Yunnosch Jun 08 '20 at 15:46
  • Thanks for editing, it is now not a link-only answer anymore. But I still do not see the point of this answer in comparison to existing answers. Please point out what additional insight you provide. Making that more obvious will noticeably increase chances for upvotes, too. – Yunnosch Jun 09 '20 at 06:16
1

You may try :

At the backend,

  1. npm install cors

  2. then, at the backend app.js , add the following,

    const cors = require('cors')

    app.use(cors({ origin: ['http://localhost:8082'], }))

Hopefully, It may help.

Wallace Wong
  • 21
  • 3
0

I'm building an app in Vue.js and added global headers in the main.js file

Example:

axios.defaults.headers.get['header-name'] = 'value'
Lindow
  • 9
  • 1
  • It works, but need help in understanding, why this works? Thanks – Mageswaran Jun 27 '21 at 17:34
  • I'm not entirely sure what you mean by "why". You can either add the header on the same component/view you make the call on or just add some global ones in the main.js file. If you have some headers that keep repeating e.g. an authorization one then you can just add it to the main.js file and it'll work across the entire app :) – Lindow Aug 27 '21 at 14:30
0

For handling CORS issues you may now have to make changes on the client side, it is not just a server issue.

Chrome has a few plugins: https://chrome.google.com/webstore/search/cors?hl=en

user3738936
  • 936
  • 8
  • 22
0

for some cases, it is not vue issue. sometimes it's back-end issue.. in my case I've made API in nest JS, and I didn't enable CORS = true.. That's why I am getting CORS policy error.

Parth
  • 1
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30128547) – Mark S. Oct 20 '21 at 19:54
-1

in my case, the API would return CORS policy, but the problem lied with my url.

my calls were like "https://api.com//call", that extra slash was causing the problem.

changing the url to "https://api.com/call" fixed the error.

kurdish sage
  • 11
  • 1
  • 3