Javascript API调用在Angular 4上不起作用。无“访问控制允许原点”标题，400

我的票系统有问题。post票证有效，但评论票证无效。 错误： 加载失败：请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许“源”访问。响应的HTTP状态代码为400

以下代码： 前端：

//函数创建新的票证表单 createNewTicketForm{ this.form=this.formBuilder.group{ //标题字段 标题：[，Validators.compose[ 需要验证器， Validators.maxLength50， Validators.minLength5， 这是字母数字验证 ]], //体场 正文：[，Validators.compose[ 需要验证器， Validators.maxLength500， 验证程序。最小长度5 ]] } } //创建用于发布评论的表单 createCommentForm{ this.commentForm=this.formBuilder.group{ 注释：[，Validators.compose[ 需要验证器， Validators.minLength1， Validators.maxLength200 ]] } } //启用注释窗体 启用注释表单{ this.commentForm.get'comment.enable；//启用注释字段 } //禁用注释表单 无效评论形式{ this.commentForm.get'comment'.disable；//禁用注释字段 } //启用新的票证表单 enableFormNewTicketForm{ this.form.get'title'.enable；//启用标题字段 this.form.get'body.enable；//enable body字段 } //禁用新的票证表单 disableFormNewTicketForm{ this.form.get'title'.disable；//禁用标题字段 this.form.get'body.disable；//禁用body字段 } //标题验证 alphaNumericValidationcontrols{ const regExp=new regExp/^[a-zA-Z0-9]+$//；//要执行测试的正则表达式 //检查测试是否返回false或true 如果regExp.testcontrols.value{ return null；//返回有效 }否则{ 返回{'alphaNumericValidation'：true}//验证中返回错误 } } //用于显示新票证表单的函数 纽蒂克特form{ this.newPost=true；//显示新的票证表单 } //在当前页面上重新加载票证 重装车票{ this.loadingTickets=true；//用于锁定按钮 this.getTickets；//向页面添加任何新票证 设置超时=>{ this.loadingTickets=false；//四秒钟后释放按钮锁 }, 4000; } //用于在票证张贴上发布新评论的函数 draftid{ this.commentForm.reset；//每次用户开始新的注释时都重置注释表单 this.newcommon=[]；//清除数组，以便一次只能对一篇文章发表评论 this.newcommon.pushid；//将正在评论的帖子添加到数组中 } //函数以提交新的票务公告 onTicketSubmit{ this.processing=true；//禁用提交按钮 this.disableFormNewTicketForm；//锁形式 //从表单字段创建票据对象 警察票={ title:this.form.get'title'。值，//title字段 body:this.form.get'body'。值，//body字段 createdBy:this.username//createdBy字段 } //将票据保存到数据库中的函数 this.\u ticketService.newTicketthis.token，ticket.subscribedata=>{ //检查票据是否保存到数据库 如果！数据。成功{ this.messageClass='alert-alert-danger'；//返回错误类 this.message=data.message；//返回错误消息 this.processing=false；//启用提交按钮 this.enableFormNewTicketForm；//启用表单 }否则{ this.messageClass='alert-alert-success'；//返回成功类 this.message=data.message；//返回成功消息 这是格提克茨； //两秒钟后清除表单数据 设置超时=>{ this.newPost=false；//隐藏表单 this.processing=false；//启用提交按钮 this.message=false；//擦除错误/成功消息 this.form.reset；//重置所有表单字段 this.enableFormNewTicketForm；//启用表单字段 }, 2000; } }; } //返回上一页的函数 戈巴克{ window.location.reload；//清除所有变量状态 } //函数从数据库中获取所有票证 格提克茨{ //函数从数据库中获取所有票证 此._ticketService.getTicketsthis.token.subscribedata=>{ this.ticketPosts=data.tickets；//分配要在HTML中使用的数组 }; } //函数来发布新的注释 后共产主义{ this.disableCommentForm；//将注释保存到数据库时禁用表单 this.processing=true；//将注释保存到数据库时锁定按钮 const comment=this.commentForm.get'comment'.value；//获取要传递给服务函数的注释值 //函数将注释保存到数据库中 this.\u ticketService.postCommentthis.token，comment.subscribedat a=>{ this.getTickets；//刷新所有票据以反映新注释 const index=this.newcommon.indexOfid；//获取要从数组中删除的票证id的索引 this.newcommon.stipleIndex，1；//从数组中删除id this.enableComentForm；//重新启用表单 this.commentForm.reset；//重置注释表单 this.processing=false；//解锁注释表单上的按钮 如果this.enabledComments.indexOfid<0 this.expandid；//在提交评论时为用户展开评论 };

---

} 看起来像是常见的CORS问题。如果您使用的是Angular CLI，我想是这样的，那么您可能需要为从dev server 4200端口到api server 3977端口的api请求配置代理。官方文件是。按照此操作并创建适当的配置文件，并将-proxy-config选项设置为npm ng serve脚本：

proxy.conf.json

{
  "/api": {
     "target": "http://localhost:3977",
     "secure": false
  }
}

package.json

"start": "ng serve --proxy-config proxy.conf.json"

来自前端票务服务的请求如下

this.http.post('/api/tickets/comment', ...

以及后端的处理

api.post('/api/tickets/comment', ...

---

我试过了，但没有成功。我相信这个问题是在后端，a也有类似的问题并得到了解决，但这一个我没有成功，其他api调用（如POST/ticket）会说什么？票证工作正常。从ticket跟踪服务：返回这个。_http.getthis.url+'tickets/'，{headers:headers}.mapres=>res.json；}我发现您的后端有api.post'/tickets/comment/，请尝试用api.post'/tickets/comment'替换它，删除尾部的slashGive相同错误。在我的终端后端中，给出了以下错误：SyntaxError:JSON中位置0处的意外标记。我遵循本教程：但我更改了一些应用程序文件