使用Polymer iron-ajax与Node.js解决CORS跨域请求问题

我来帮你搞定这个CORS问题，看起来你在配置上踩了两个常见的坑：客户端错误发送了服务端专属的响应头，服务端的CORS配置又有冲突，导致预飞行请求（OPTIONS）返回了400错误。下面是具体的修复步骤：

一、服务端（Node.js）配置修复 #

首先，咱们简化并规范CORS配置，不要同时混用cors中间件的OPTIONS处理和自定义header中间件，推荐直接用cors中间件全局处理，这样更可靠：

1. 确保你已经安装了cors依赖：

npm install cors --save

2. 修改你的服务端代码，调整配置顺序和内容：

const cors = require('cors');
const express = require('express');
const app = express();

// 先配置CORS，再挂载路由和其他中间件
const corsOptions = {
  origin: 'http://localhost:4001', // 明确指定允许的Polymer源，比*更安全
  methods: ['GET', 'HEAD', 'OPTIONS', 'POST', 'PUT'],
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization', 'x-api-key']
};

// 全局应用CORS中间件，自动处理所有OPTIONS预飞行请求
app.use(cors(corsOptions));

// 别忘了添加JSON请求体解析中间件，否则POST的JSON数据会接收不到
app.use(express.json());

// 接下来挂载你的路由（比如登录接口）
// app.use('/node/api/mssql', yourLoginRouter);

关键说明：

• 一定要在挂载路由之前先应用cors和express.json()中间件，否则路由不会被CORS规则覆盖，也无法解析JSON请求体。
• 明确指定origin为你的Polymer地址（http://localhost:4001），比通配符*更安全，还能避免某些场景下的跨域问题。

二、客户端（Polymer）配置修复 #

你错误地在iron-ajax里发送了Access-Control-Allow-Origin请求头——这个头是服务端返回给浏览器的响应头，不是客户端需要发送的，反而会干扰预飞行请求。同时，POST请求建议用请求体传递数据，而不是URL参数：

修改后的iron-ajax代码：

<iron-ajax 
  id="ajaxUser" 
  url="http://localhost:8080/node/api/mssql/login" 
  method="post" 
  handle-as="json" 
  content-type="application/json" 
  body="[[userCredentials]]" <!-- 用body传递JSON请求体，替代params -->
  on-response="saveUserCredentials" 
  last-response="{{user}}">
</iron-ajax>

关键说明：

• 移除了无效的headers='{"Access-Control-Allow-Origin": "*"}'配置。
• 如果你的登录接口是接收JSON格式的请求体，就用body属性传递数据（比如userCredentials是包含username和password的对象），而params是用来拼接URL查询参数的（对应GET请求的方式）。

额外检查点 #

从你的错误信息来看，请求路径是/login?username=user&password=password，但你的iron-ajax配置的URL是/node/api/mssql/login，这说明路径可能不匹配，导致服务端返回400错误。请确认你的Node.js路由路径和iron-ajax的URL完全一致。

完成以上修改后，重启Node.js服务和Polymer应用，再测试请求应该就能解决CORS错误了。

内容的提问来源于stack exchange，提问作者KVNA