vue-resource: Access-Control-Allow-Origin错误

Question

vue-资源：

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

我的api使用CORS laravel进行了正确配置。

我得到了这个错误：

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.

请求头部：

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

我哪里错了？

谢谢!

Answer 1

我认为你应该像这样在服务器端设置header (如果你使用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');

关键字在第2行，意思是可以访问POST/GET/OPTIONS来请求。

另外，英语不是我的母语，希望它能有所帮助

Answer 2

对我有效的解决方案是将这些头文件添加到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');

并将以下选项传递给Vue，以将post数据传递给PHP：

Vue.http.options.emulateJSON = true