
iron-ajax 因协议字符串缺失双斜杠(//)导致请求被错误解析为相对路径,实际发出 http:localhost:8080/journal_tag 这类非法 URL,应显式构造完整绝对 URL(如 http://localhost:8080/journal_tag)并避免协议与主机名粘连。
iron-ajax 因协议字符串缺失双斜杠(`//`)导致请求被错误解析为相对路径,实际发出 `http:localhost:8080/journal_tag` 这类非法 url,应显式构造完整绝对 url(如 `http://localhost:8080/journal_tag`)并避免协议与主机名粘连。
在 Polymer 应用中使用 <iron-ajax> 时,URL 构造不规范是引发“请求发往错误地址”的常见原因。你观察到的 DevTools 日志:
GET XHR http://localhost:8080/localhost:8080/journal_tag
正是典型症状——浏览器将 http:localhost:8080/journal_tag 解析为相对路径(因缺少 //),于是自动补全为当前页面所在域的子路径,最终形成重复 host 的畸形 URL。
根本问题出在这一行代码:
this.the_server_url = document.location.protocol + document.location.host + "/journal_tag";
document.location.protocol 返回值为 "http:" 或 "https:"(末尾带冒号,无斜杠),而 document.location.host 是 "localhost:8080",二者直接拼接得到 "http:localhost:8080/journal_tag" —— 这不是合法绝对 URL,而是被浏览器当作“协议为 http:、主机名为 localhost:8080”的自定义协议方案,从而触发错误解析。
✅ 正确做法是显式添加双斜杠,确保生成标准绝对 URL:
ready: function() {
// ✅ 正确:补全 '//' 构成合法协议分隔符
this.the_server_url = document.location.protocol + '//' +
document.location.host +
'/journal_tag';
}此外,还需注意以下关键点:
-
避免冗余 auto + 手动触发逻辑冲突:你的 <iron-ajax> 同时设置了 auto 属性和 on-tap="tap_new_tag" 触发逻辑。auto 会在 url 或 params 变更时立即发送请求,而 tap_new_tag 中修改 ajax_new_tag 会意外触发非预期请求。建议移除 auto,改用显式 generateRequest():
<iron-ajax id="ajax" url="{{the_server_url}}" params="{{ajax_new_tag}}" handle-as="json" on-response="new_tag_response" last-response="{{the_xhr_response}}"> </iron-ajax>tap_new_tag: function() { this.ajax_new_tag = {tag: this.the_new_tag}; this.$.ajax.generateRequest(); // ✅ 显式控制请求时机 } 服务端验证 URL 路径一致性:确保 Go 服务注册路径与前端请求完全匹配(区分大小写、结尾斜杠等)。你的 http.HandleFunc("/journal_tag", ...) 正确,但需确认服务器监听地址与前端 host 一致(如 localhost:8080),且未被反向代理重写路径。
-
调试建议:在发送前打印并校验 URL:
tap_new_tag: function() { console.log('Final URL:', this.the_server_url); // 确保输出 http://localhost:8080/journal_tag console.log('Params:', this.ajax_new_tag); this.$.ajax.generateRequest(); }
总结:URL 拼接必须遵循 RFC 3986 规范,protocol + '//' + host + path 是构建可靠绝对 URL 的安全模式。永远不要依赖浏览器对不完整 URL 的“智能修复”,尤其在 Web Components 环境中,明确性即稳定性。


















