axios 预检失败错误 301 使用 vue.js
axios preflight fail error 301 using vue.js
我有一个 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
回复Headers
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)
来源Headers
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 服务器，工作正常。
任何线索都会有所帮助，因为我不知道如何解决这个问题。提前致谢。
您的浏览器在尝试任何请求之前发送 CORS preflight OPTIONS request，而您的代码实际上正在尝试发送它自己，然后您的 Laravel 后端正在响应该 OPTIONS 请求301 Moved Permanently 重定向。
服务器必须以 2xx 状态响应 OPTIONS 预检 — 通常为 200 或 204。
如果服务器不这样做，预检失败，浏览器永远不会尝试实际请求。
因此您必须更改 Laravel 后端以使用 200 或 204 响应 OPTIONS。
并且浏览器首先进行预检，因为您的请求添加了 Authorization 和 Content-Type: application/json;charset=utf-8 & Access-Control-Allow-Origin headers.
您应该删除在那里添加 Access-Control-Allow-Origin 的代码，因为那是一个 响应 header 并且永远不需要在请求中发送它.但是假设您需要请求中的 Authorization 和 Content-Type header 才能使其在您的后端实际按预期工作，那么您就无法避免浏览器预检。
所以你真的必须配置你的 Laravel 后端来响应 OPTIONS 2xx 成功。
服务器正在从以下地址发送重定向：
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 服务器错误。
我有一个 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
回复Headers
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)
来源Headers
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 服务器，工作正常。
任何线索都会有所帮助，因为我不知道如何解决这个问题。提前致谢。
您的浏览器在尝试任何请求之前发送 CORS preflight OPTIONS request，而您的代码实际上正在尝试发送它自己，然后您的 Laravel 后端正在响应该 OPTIONS 请求301 Moved Permanently 重定向。
服务器必须以 2xx 状态响应 OPTIONS 预检 — 通常为 200 或 204。
如果服务器不这样做，预检失败，浏览器永远不会尝试实际请求。
因此您必须更改 Laravel 后端以使用 200 或 204 响应 OPTIONS。
并且浏览器首先进行预检，因为您的请求添加了 Authorization 和 Content-Type: application/json;charset=utf-8 & Access-Control-Allow-Origin headers.
您应该删除在那里添加 Access-Control-Allow-Origin 的代码，因为那是一个 响应 header 并且永远不需要在请求中发送它.但是假设您需要请求中的 Authorization 和 Content-Type header 才能使其在您的后端实际按预期工作，那么您就无法避免浏览器预检。
所以你真的必须配置你的 Laravel 后端来响应 OPTIONS 2xx 成功。
服务器正在从以下地址发送重定向：
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 服务器错误。