CORS场景下aurelia-fetch-client withBaseUrl配置及URL异常排查

嘿，这个问题其实一眼就能揪出来——你的withBaseUrl配置里少了一个斜杠！你写的是http:/localhost:8080/restapi/v1/，正确的格式应该是http://localhost:8080/restapi/v1/（注意http:后面是两个斜杠）。

因为URL格式不规范，aurelia-fetch-client会把这个路径当成相对路径来处理，所以它自动把当前Aurelia应用的主机地址（http://localhost:9000）拼在了前面，就出现了你看到的那个奇怪的错误URL：http://localhost:9000/localhost:8080/restapi/v1/things。

修正后的配置代码 #

let httpClient = new HttpClient();
httpClient.configure(config => {
 config
 .withBaseUrl('http://localhost:8080/restapi/v1/') // 补全第二个斜杠就搞定了
 .withDefaults({ credentials: 'omit', mode: 'cors' });
});

改完之后再发起fetch('things')请求，就会正确拼接成你预期的http://localhost:8080/restapi/v1/things了。

关于绕过CORS的额外建议 #

你提到想完全绕过CORS，不用在REST服务器上做配置，这里给你个开发阶段的实用方案：在Aurelia的开发服务器里配置代理。

比如如果你用的是aurelia-cli，可以打开aurelia_project/aurelia.json，找到devServer配置项，添加代理规则：

"devServer": {
  "proxy": {
    "/restapi": {
      "target": "http://localhost:8080",
      "changeOrigin": true
    }
  }
}

这样你就可以把baseUrl改成/restapi/v1/，请求时直接用相对路径，开发服务器会自动把请求转发到http://localhost:8080，完美绕开CORS问题。生产环境的话，你可以用Nginx这类反向代理工具来实现同样的效果。

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