axios preflight失败错误301使用vue.js

Question

我有一个Laravel 5.4 API,在Postman和浏览器中工作正常.Localhost工作正常 - Laravel 5.4在一个端口上运行,而热部署模式下的Vue运行正常.

但是,当我将Vue代码移动到我的生产服务器时,我收到此错误:

Response for preflight is invalid (redirect)

在Chrome开发者工具中,网络标签显示以下内容:

一般

Request URL:http://backend-dev.xolas.io/api/v1/view/calendar/-30/90/
Request Method:OPTIONS
Status Code:301 Moved Permanently
Remote Address:217.182.66.247:80
Referrer Policy:no-referrer-when-downgrade

响应标题

Connection:Keep-Alive
Content-Length:349
Content-Type:text/html; charset=iso-8859-1
Date:Mon, 10 Jul 2017 13:40:08 GMT
Keep-Alive:timeout=5, max=100
Location:http://backend-dev.xolas.io/api/v1/view/calendar/-30/90
Server:Apache/2.4.25 (Ubuntu)

起源标题

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin,authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:backend-dev.xolas.io
Origin:http://localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Mobile Safari/537.36

我在Laravel上安装了一个CORS插件,仍然没有任何乐趣.

我的axios配置如下:

axios.defaults.headers.common['Authorization'] = store.apiKey
axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'https://' + store.endpoint + ', http://' + store.endpoint

端点是Larvel API服务器,工作正常.

任何线索都会有所帮助,因为我对如何解决这个问题感到茫然.提前致谢.

Answer 1

服务器正在从以下位置发送重定向:

http://backend-dev.xolas.io/api/v1/view/calendar/-30/90/

至:

http://backend-dev.xolas.io/api/v1/view/calendar/-30/90

删除请求中的尾随'/'应该阻止301.(尽管该URL响应500服务器错误.

Answer 2

您的浏览器\xe2\x80\x99s在尝试您的代码\xe2\x80\x99s 实际上尝试发送自身的任何请求之前发送CORS 预检OPTIONS请求OPTIONS，然后您的 Laravel 后端通过重定向响应该请求301 Moved Permanently。

\n

服务器必须OPTIONS使用 2xx 状态 \xe2\x80\x94（通常为 200 或 204）响应预检。

\n

如果服务器\xe2\x80\x99不这样做，预检就会失败，浏览器永远不会尝试实际的请求。

\n

OPTIONS因此，您必须更改 Laravel 后端以使用 200 或 204响应。

\n

浏览器首先会进行预检，因为您的请求添加了Authorization和Content-Type: application/json;charset=utf-8&Access-Control-Allow-Origin标头。

\n

您应该删除\xe2\x80\x99s 添加的代码Access-Control-Allow-Origin，因为\xe2\x80\x99s 是一个响应标头，而\xe2\x80\x99s 永远不需要在请求中发送它。但是假设您需要请求中的Authorization和Content-Type标头才能使其真正按照后端的预期工作，那么您将无法避免浏览器预检。

\n

因此，您确实必须配置 Laravel 后端才能响应OPTIONS2xx 成功。

\n