使用 Polymer Iron-ajax 和 Node.js 发出 CORS 请求

Posted 2023-03-04

【中文标题】使用 Polymer Iron-ajax 和 Node.js 发出 CORS 请求

【英文标题】：Make CORS Request with Polymer iron-ajax and Node.js

【发布时间】：2018-06-16 10:20:37

【问题描述】：

我正在尝试使用 Polymer 和 Node 检索数据，但正在努力获得有效的响应。我收到一个飞行前响应错误，指出不允许使用 access-control-allow-origin。

我在 localhost:4001 上运行 Polymer，在 localhost:8080 上运行 Node。

如何配置节点或客户端以加载响应？

客户

<iron-ajax id="ajaxUser"
  url="http://localhost:8080/node/api/mssql/login"
  method="post"
  handle-as="json"
  Content-Type="application/json"
  headers='"Access-Control-Allow-Origin": "*"'
  params="[[params]]"
  on-response="saveUserCredentials"
  last-response="user"></iron-ajax>

节点

const corsOptions = 
  allowedHeaders: ['Content-Type', 'Access-Control-Allow-Origin']


app.options('*', cors(corsOptions))

...

app.use((req, res, next) =>  // Enable Cross-Origin Resource Sharing (CORS)
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-api-key")
  next()
)

错误

加载失败http://localhost:8080/login?username=user&password=password: 请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此，Origin 'http://localhost:4001' 不允许访问。 响应的 HTTP 状态代码为 400。

【参考方案1】：

问题中代码sn-p中的Node配置不处理OPTIONS请求。

为确保 CORS preflights 得到正确处理，请考虑安装 npm cors 包：

npm install cors

然后做这样的事情：

var express = require('express')
  , cors = require('cors')
  , app = express();
app.options('*', cors()); // preflight OPTIONS; put before other routes

这将处理预检响应和其他 CORS 方面，而无需您在应用程序代码中从头开始手动编写自己的处理。

https://www.npmjs.com/package/cors#configuration-option 提供所有选项的更多详细信息。

【讨论】：

设置const corsOptions = allowedHeaders: ['Content-Type', 'Access-Control-Allow-Origin']并将其传递给cors()后，我得到Failed to load http://localhost:8080/login?username=username&password=password: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4001' is therefore not allowed access. The response had HTTP status code 400.

响应的 HTTP 状态代码为 400。 这是服务器错误。所以这不是 CORS 问题。您在该消息中看到“Access-Control-Allow-Origin”的提及只是因为服务器没有将额外的标头添加到 4xx 错误响应中（不仅是“Access-Control-Allow-Origin”标头，还有任何您可能会尝试在应用程序代码中添加其他标头）。

因此，您需要解决的问题是导致服务器端出现 400 内部错误的原因。 400 错误表示“错误请求”，通常表明请求有效负载的格式不是服务器所期望的。因此，在这种情况下，我猜要么服务器不希望收到 application/json 有效负载，要么您的代码发布的内容实际上不是有效的 JSON。您需要检查服务器日志以查看当它发回 400 响应时它可能会在服务器端记录哪些信息。

是的，我遇到了另一个 JSON 解析错误。 Unexpected token # in JSON at position 0 at JSON.parse (<anonymous>)... 来自 body-parser 模块。虽然我不确定如何将console.log 传递到端点。

更多上下文在这里：***.com/questions/48131105/…