CORS issue with Vue.js

Question

I'm using:

Vue 2.0.3
vue-router 2.0.1
vuex 0.8.2
vue-resource 0.7.0

And after trying to login to my page when using remote API, not the locally run one, I get cors error like following

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

Now I have API running in Azure, and since it allows me to test my calls from Postman, I am quite sure the CORS headers are set properly on backend. Not so sure about the Vue and the front.

I have situation like this in config files:

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

than i.e I am calling this action like:

login: function (userData) {
    return AuthResource.save({action: 'login'}, userData)
}

Finally as I am checking auth in login via token in vuex submodule I have just a simple header check-up state.

var updateAuthHeaders = () => {
    var token = JSON.parse(localStorage.getItem("auth_token"))
    if (token != null){
        Vue.http.headers.common['Authorization'] = token
    }else{
        Vue.http.headers.common['Authorization'] = null
    }
}

I have tried adding Vue.http.headers.common['Access-Control-Allow-Origin'] = true here, but did not help the case.

Any idea? What am I doing wrong.. I suppose it will not work for other calls also if it doesn't work for login.

This doesn't appear to be a CORS issue (as indicated by the 415 error) and there is nothing wrong with your code of client-end. Could you please provide your key code snippet of your backend? — Aaron Chen
– Aaron Chen, Commented Nov 30, 2016 at 7:15
you were totally right! There was my issue with API project not allowing access from the JS inside browsers — desicne
– desicne, Commented Nov 30, 2016 at 10:40
@Darem wasn't a front-end issue. Server setup was not done right at the time. — desicne
– desicne, Commented Aug 23, 2018 at 11:33

Negar · Accepted Answer · 2019-04-07 11:04:57Z

38

You face this error when the API url and client url aren't the same. Vue CLI 3 (and in the core of it, Webpack) allows you to proxy your API url to your client url.

Inside vue.config.js file add following lines:

// vue.config.js
module.exports = {
  // options...
  devServer: {
        proxy: 'https://mywebsite/',
    }
}

And then send your ajax calls to http://localhost/api/.

You can read the full article here: How to deal with CORS error on Vue CLI 3?

edited Apr 7, 2019 at 11:04

answered Apr 7, 2019 at 10:40

Negar

6791 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Osh Mansor Over a year ago

Thanks! Cool hack! For my case I need to add port when running it in development. module.exports = { devServer: { port: 3000, proxy: "http://localhost/api" } }

vithu shaji Over a year ago

i am getting the following error Proxy error: Could not proxy request / from localhost:8080 to localhost:3000/api/auth.

israr Over a year ago

What is there are some api on the localhost where the vuejs resides, and need to call some api which reside on another server. In that case , @Negar your solution does not works. I have a proejct , which contains larvel api and vuejs. Vuej consuming larvel api fine but when call to other api is made it give cors error. Your implementation give error method not found.

ATG Over a year ago

I'm using VITE and not VUE-CLI. Any suggesstion in this?

MwBakker Mar 14 at 0:10

ReferenceError: module is not defined in ES module scope is the error which generates this solution

darryn.ten · Accepted Answer · 2016-11-29 11:32:15Z

While you can add Access-Control-Allow-Origin: * to your server response (in this case IIS) but this is very much advised against.

What's happening here is that your client is http://localhost and it is trying to access https://mywebsite/api/ which means they're not from the same origin

If you add Access-Control-Allow-Origin: * you will be allowing the entire world to hit your API endpoint.

I'd suggest making your access control server headers Access-Control-Allow-Origin: *.mysite and make a vhost for your localhost to use dev.mysite or similar.

This will allow your "localhost" to access your API without issues.

You could also add localhost to a whitelist, but this is also not without its own security implications, and it doesn't work everywhere anyway.

So, in short, make a vhost for your localhost that's in the same domain as your REST service and your issue should be resolved.

Once you go live you should remove the *.mysite part and use as specific a domain as possible on your whitelist.

Good luck!

Nickensoul · Accepted Answer · 2017-07-13 13:20:39Z

8

1) Be sure that server sends Access-Control-Allow-Origin "*" header.

2) Vue.http.headers.common['Access-Control-Allow-Origin'] = true, Vue.http.headers.common['Access-Control-Allow-Origin'] = '*' and etc. don't needed in the client request.

3) Vue.http.options.emulateJSON = true should helps if 1 and 2 points already are ok, but vue-resource fails with status 0. Also, try to remove (if they exist) Vue.http.options.credentials = true and Vue.http.options.emulateHTTP = true.

answered Jul 13, 2017 at 13:20

Nickensoul

4526 silver badges9 bronze badges

Comments

Parthipan Natkunam · Accepted Answer · 2016-11-29 11:58:36Z

2

Greater possibility is that CORS is not enabled on the IIS. This can be enabled by modifying the web.config file in the application root folder in IIS as follows:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

Note: This method will allow anyone to reach the API endpoint and hence shouldn't be adopted on a production environment but only on a development environment.

edited Nov 29, 2016 at 11:58

answered Nov 29, 2016 at 10:35

Parthipan Natkunam

7941 gold badge11 silver badges16 bronze badges

Comments

Rai Ahmad Fraz · Accepted Answer · 2021-02-18 19:22:19Z

-4

Just attach these in the response to your all API's

res.header('Access-Control-Allow-Origin','*');

res.header('Access-Control-Allow-Methods','GET, POST, OPTIONS, PUT, PATCH, DELETE');

res.header('Access-Control-Allow-Headers','Origin,Content-Type,X-Requested-With,Accept,Authorization');

answered Feb 18, 2021 at 19:22

Rai Ahmad Fraz

554 bronze badges

3 Comments

darryn.ten Over a year ago

This is terribly unsafe if it makes it to production

Rai Ahmad Fraz Over a year ago

@darryn.ten can you please guide me with correct way?

Gi1ber7 Over a year ago

Unsafe solution shouldn't be response to a connection or CORS issue.

Collectives™ on Stack Overflow

CORS issue with Vue.js

5 Answers 5

5 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related