axios 使用 vue.js 预检失败错误 301

Question

我有一个 Laravel 5.4 API，它在 Postman 和浏览器中运行良好。本地主机工作正常 - 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

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

在尝试您的代码实际尝试发送的任何请求之前，您的浏览器会发送 CORS 预检

OPTIONS

请求，然后您的 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

标头。

您应该删除在那里添加

Access-Control-Allow-Origin

的代码，因为这是一个 response 标头，并且不需要在请求中发送它。但假设您需要请求中的

Authorization

和

Content-Type

标头才能使其在后端实际按预期工作，那么您就无法避免浏览器预检。

因此，您确实必须配置 Laravel 后端才能以 2xx 成功响应

OPTIONS

。

Answer 3

我在部署 Vue.js 应用程序时也遇到了这个错误。就我而言，我已将 .env.Production 文件中的

VITE_API_BASE_URL

设置为

https://example.com/api

，但我的服务器正在响应

https://www.example.com/api

处的请求。经过几个小时的搜索，我发现在 URL 中包含

www

解决了我的问题。