![](/img/trans.png)
[英]Headers null when making a CORS request with Aurelia-Fetch-Client
[英]TypeError when using aurelia-fetch-client
我正在使用aurelia-fetch-client版本1.0.1。
我在创建的服务类中执行提取,并且出现错误提示:
TypeError:无法在eval [filepath] aurelia-fetch-client读取未定义的属性'isProtoTypeOf'。
在第134行的aurelia-fetch-client文件中引发了实际错误。代码如下:
这段代码来自aurelia-fetch-client:
var promise = processRequest(request, this.interceptors).then(function (result) {
var response = null;
if (Response.prototype.isPrototypeOf(result)) { <<--PROBLEM IS HERE!!!! LINE 134
response = result;
} else if (Request.prototype.isPrototypeOf(result)) {
request = Promise.resolve(result);
response = fetch(result);
} else {
throw new Error('An invalid result was returned by the interceptor chain. Expected a Request or Response instance, but got [' + result + ']');
}
return request.then(function (_request) {
return processResponse(response, _this.interceptors, _request);
});
});
往上看。 我已经注释了引发错误的代码行。 “原型”为null,因此它正在返回给定的错误消息。
我在上一个项目中完成了所有这些工作,但是使用的是beta版本的aurelia-fetch-client。 下面的代码与调用aurelia-fetch-client beta版本的代码非常相似。
文档指出,我需要为此加载一个polyfill,因此我按指定的方式加载了“ fetch” polyfill(我正在main.js中这样做),但是仍然不断收到此错误。 如果我将其加载到服务中,也会发生同样的事情。
每个人都有经历过,您如何解决?
这是服务调用和基本服务的一些代码:
import {inject} from 'aurelia-framework';
import {Configure} from 'aurelia-configuration';
import {HttpClient} from 'aurelia-fetch-client';
export class ServiceBase {
// *************************************************************
// Services Constructor
// Sets up the base http Client configuration
// *************************************************************
constructor(configure, httpClient) {
// Set up configuration and initial user token
this.userToken = 'tokenvalue'; //TODO: put real one in later, not used on this call
this.configure = configure;
this.httpClient = httpClient;
this.httpClient.configure(config => {
config
.withBaseUrl(this.configure.get('servicesBaseUrl'))
.withDefaults({
headers: {
'content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/x-www-form-urlencoded',
'X-Requested-With': 'Fetch'
},
mode: 'cors'
})
.withInterceptor({
request(request) {
console.log('KCU Class Requesting: ' + request.method + '; ' + request.url);
return request;
},
response(response) {
console.log('KCU Class Received: ' + response.status + '; ' + response.url);
if (response.status !== 200) {
throw response;
} else {
return response;
}
},
requestError(err) {
console.log('Request Error Receieved: ' + err.toString());
}
});
});
}
}
以及扩展该基类的服务:
import {inject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';
import {Configure} from 'aurelia-configuration';
import {ServiceBase} from './serviceBase'
@inject(Configure, HttpClient)
export class HospitalService extends ServiceBase {
constructor(configure, httpClient) {
super(configure, httpClient);
this.configure = configure;
}
// ****************************************
// Extracts the list of hospitals for the initial search grid
// ****************************************
getHospitalListSearchGridData() {
let urlCompletion = '';
return this.httpClient.fetch(
this.configure.get('HospitalSearch') + urlCompletion, // This is the method name on the service to call
{
method: 'get',
headers: {
'Authorization': 'Bearer ' + this.userToken.toString()
}
}
)
.then(response => response.json())
.then(responseInfo => {
return responseInfo;
})
.catch(error => {
return false;
});
}
}
有关整个项目的更多信息是,这是在现有ASP.NET MVC项目内部构建的。 正在创建一个新区域,将在其中放置新的屏幕集,该区域还可以很好地封装文件和相关性,但是可以利用提供数据接口的现有服务层。
对于可能遇到此问题(或类似问题)的人们,我已经找到了问题的根源。
这与polyfill没有任何关系。 JS代码可在最新版本的Chrome(v 54.xxx)中使用。 而且由于它不是较旧的浏览器,因此polyfill不会出错。 问题出在javascript文件冲突。
“响应”对象以某种方式被覆盖,我必须确定在哪里。 由于它位于较大的ASP.NET MVC应用程序内部,因此我在主应用程序的脚本文件中查找了应用程序树,并发现确实使用了response.js文件。 它是在很早以前实施的,以帮助访问我们应用程序套件的服务层。
删除此内容后,aurelia-fetch-client按照广告中的说明工作。 现在的问题是,访问服务的某些现有代码无法正常工作。 解决方案超出了本文的范围。 最重要的是,这是JS冲突引起的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.