Iron-ajax 401 未经授权或 CORS 问题答案

【问题标题】：Iron-ajax 401 unauthorized or CORS issueIron-ajax 401 未经授权或 CORS 问题
【发布时间】：2017-10-26 09:44:25
【问题描述】：

我在 Polymer 2.0 上使用 iron-ajax 时遇到问题。我的代码基于 Polymer 1.0，我正在尝试对其进行调整。我通过这样的 POST 发送表单：

模板：

        <div class="wrapper-btns">
            <paper-button raised class="primary" on-tap="postLogin">Log In</paper-button>
            <paper-button class="link" on-tap="postRegister">Sign Up</paper-button>
        </div>

代码：

    _setReqBody() {
        this.$.registerLoginAjax.body = this.formData;
    }

    postLogin() {
        this.$.registerLoginAjax.url = 'http://localhost:3001/sessions/create';
        this._setReqBody();
        this.$.registerLoginAjax.generateRequest();
    }

Iron-Ajax 设置：

    <iron-localstorage name="user-storage" value="{{storedUser}}"></iron-localstorage>
    <app-data key="userData" data="{{storedUser}}"></app-data>

    <iron-ajax
        id="registerLoginAjax"
        method="post"
        content-type="application/json"
        handle-as="text"
        on-response="handleUserResponse"
        on-error="handleUserError"></iron-ajax>

当我这样做时，我收到以下错误：

POST http://localhost:3001/sessions/create 400（错误请求）

当我在 Iron-Ajax 上使用这条线时：

with-credentials="true"

这个错误似乎是一个 CORS 问题：

XMLHttpRequest 无法加载 http://localhost:3001/sessions/create。对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Origin”标头的值必须当请求的凭据模式为时，不是通配符“*” '包括'。因此不允许使用原点“http://127.0.0.1:8081” 使用权。发起请求的凭证模式 XMLHttpRequest 由 withCredentials 属性控制。

我做错了什么？

【问题讨论】：

服务器端有什么？它是否适用于 Polymer 1.*？

标签： cors polymer polymer-1.0 polymer-2.x iron-ajax

【解决方案1】：

更改http://localhost:3001/sessions/create 后端的服务器端代码，以在来自http://127.0.0.1:8081/ 的请求的响应中发送响应标头Access-Control-Allow-Origin: http://127.0.0.1:8081/，而不是像现在这样发回响应标头Access-Control-Allow-Origin: *。

Credentialed requests and wildcards section of the MDN page on CORS 解释了原因：

在响应凭据请求时，服务器必须在 Access-Control-Allow-Origin 标头的值中指定来源，而不是指定“*”通配符。

【讨论】：