cors - 预检响应无效（重定向） - redux答案

【问题标题】：cors - Response for preflight is invalid (redirect) - reduxcors - 预检响应无效（重定向） - redux
【发布时间】：2017-04-25 00:36:38
【问题描述】：

我有行动

export function searchInWiki(search) {
const myRequest = new Request(API_URL + search);
const myInit = {
  method: 'POST',
  mode: 'cors',
  headers: {
   'Access-Control-Allow-Origin':'*',
   'Content-Type':'multipart/form-data',
    'Access-Control-Allow-Methods': 'DELETE, HEAD, GET, OPTIONS, POST, PUT',
    'Access-Control-Allow-Headers': 'Content-Type, Content-Range, Content-Disposition, Content-Description',
    'Access-Control-Max-Age': '1728000'
  }
};

return dispatch => fetch(myRequest, myInit)
  .then(response => response.json())
  .then(json => dispatch(getResults(json)))
}

但我不断收到错误“预检响应无效（重定向）”。你能告诉我如何解决它吗？

【问题讨论】：

标签： reactjs cors redux fetch

【解决方案1】：

当您发出 CORS 预检请求时，听起来您的服务器正在响应重定向。它不应该那样做。我已经看到这种情况发生在它重定向为对授权失败的反应之前。我们处理的方法是检查请求方法是否等于OPTIONS，然后立即以状态码 200 结束响应。

【讨论】：

授权？奇怪的。我基于初学者工具包redux-minimal.js.org 并没有在那里搞砸很多。刚刚安装了 redux-thunk。这里的服务器不包括任何授权......但是这个工具包是为 readux-sagas 创建的，而不是 thunk - 也许在 cors 中可能有什么问题？

【解决方案2】：

您可能缺少credentials 选项：

credentials: 'same-origin', // 包括，同源，*省略

除此之外，我不明白您为什么要从浏览器发送应该由服务器填充的标头。我说的是所有这些 CORS 标头。检查docs on using fetch，特别是on CORS，它解释了CORS请求中允许的标头：

除了由用户代理自动设置的标题（对于例如，Connection、User-Agent 或任何其他带有 Fetch 规范中定义为“禁止的标头名称”的名称），只有允许手动设置的标题是那些 Fetch 规范定义为“CORS-safelisted request-header”，它是：
Accept
Accept-Language
Content-Language
Content-Type (but note the additional requirements below)
Last-Event-ID
DPR
Save-Data
Viewport-Width
Width

【讨论】：