Question

我正在使用VSCode构建有角度的应用程序，试图调用内置于ASP.NET核心的Web服务API，我已经使用Postman测试了Web api，并且效果很好。

从angular应用程序调用时，出现以下错误

student-registration.component.ts:177 error
student-registration.component.ts:178 SyntaxError: Unexpected end of input
    at trainingcreditvalidation.service.ts:43
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

这是我的维修件代码

  getTraining()
  {
    console.log( 'gettraninig' );

    return fetch( 'http://localhost:51218/api/traininig/test', { mode: 'no-cors' } )
      .then( response => response.json() );
  }

然后是进行调用的组件

    this.trainingCreditService.getTraining().then( ( response ) =>
    {
      response.json().then( ( data ) =>
      {
        console.log( 'TC Fetch: ' + JSON.stringify( data ) );
      } );
    } ).catch( ( err ) =>
    {
      console.log( err );
    } );

我是根据Fetch API中的示例创建的。如果我取出{ mode: 'no-cors' }，则会收到CORS错误

Answer 1

尝试像这样更改代码：

this.trainingCreditService.getTraining()
 .then( ( response ) => {
    console.log("TC Fetch", response)
    } )
 .catch( ( err ) => console.log( err ));

您搞砸了一些括号，来自getTraining()的数据已经是json格式（您已经通过getTraining()方法将其转换为json）。因此，无需在其上调用json()。

通过提取调用API时，您需要将请求模式设置为'cors'：

getTraining()
  {
    console.log( 'gettraninig' );

    return fetch( 'http://localhost:51218/api/traininig/test', { mode: 'cors' } )
      .then( response => response.json() );
  }

这是由于跨源资源共享（CORS）。默认情况下，浏览器不允许在一个域上运行的任何脚本访问另一个域上的资源。因此，您需要在请求中添加额外的标头，以告知浏览器允许此请求，并将模式设置为cors即可满足您的要求。

您可以找到有关CORS的更多信息here

还可以查看提取API中的其他modes

调用Web服务时出现问题，可能与CORS

1 个答案: