vue-resource: Access-Control-Allow-Origin error

Question

vue-resource:

Vue.http.post(API_URL + '/jwt/access_token', credentials, {
            headers: {
                'Access-Control-Allow-Origin': true
            }
        }).then(response => {
            console.log(response.data)
        }, err => reject(err))

My api is properly configured with the CORS laravel..

I get that error:

XMLHttpRequest cannot load http://finance.app/jwt/access_token. 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.

Request headers:

OPTIONS /jwt/access_token HTTP/1.1
Host: finance.app
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, content-type
Accept: */*
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4

where I'm going wrong? :(

Thanks!

The problem was solved. Was no setting in vue-resource, but a small middlware configuration error in laravel. Thanks. — Giovanne
– Giovanne, Commented Aug 4, 2016 at 0:46

Frank He · Accepted Answer · 2016-08-04 14:13:18Z

2

I think you should set header in server side like this(if you are using PHP):

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: X-HTTP-Method-Override, Content-Type, x-requested-with, Authorization');

the key is line 2, means can access POST/GET/OPTIONS to request.

P.S. English is not my mother language hope it would help

answered Aug 4, 2016 at 14:13

Frank He

6274 silver badges11 bronze badges

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

Comments

Lars Schinkel · Accepted Answer · 2017-02-27 08:55:11Z

0

The solution that worked for me is to add these headers to PHP:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
header('Access-Control-Allow-Methods: GET, POST, PUT');

And following option to Vue, to pass post data to PHP:

Vue.http.options.emulateJSON = true

answered Feb 27, 2017 at 8:55

Lars Schinkel

82110 silver badges18 bronze badges

Collectives™ on Stack Overflow

vue-resource: Access-Control-Allow-Origin error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related