Question

使用以下标题时我没有问题，但是使用put方法时会遇到CORS错误。经过几次尝试，我手动将主体硬编码到其中，但是在单击“提交”按钮以在UI中触发此服务时仍然遇到cors错误。

该错误消息向我显示了这样的消息：跨域请求被阻止：同源策略禁止读取[url path ...]上的远程资源。（原因：CORS标头“ Access-Control-Allow-Origin”缺失）。

  updateData(dataObj: GroupData,id: number ): Observable<any> {

     let httpOptions = {
       headers: new HttpHeaders({
         'Content-Type': 'application/json; charset=utf-8',
         "Access-Control-Allow-Origin": "*",
         'Access-Control-Allow-Headers': 'Content-Type',
       })
       , withCredentials: true
     };
    
    const url= this.base+ 'Group/'+ id;

    var body = dataObj
    let bodynew = '{"ID":23425,"Name": "Test","Info": "Test Data"}';

    return this.http.put<GroupData>(url,  bodynew, httpOptions);
  }

Answer 1

必须从后端处理。您的后端应允许您的来源（您的前端主机URL）接收http请求。

Answer 2

尝试一下。

在Http选项中将 交叉来源 添加为 true 。如果这不能解决您的问题，则需要在服务器端更改一些与起源相关的更改。

...
  headers: new HttpHeaders({
         'Content-Type': 'application/json; charset=utf-8',
         "Access-Control-Allow-Origin": "*",
         'Access-Control-Allow-Headers': 'Content-Type',
         'Cross-Origin': true
  })
...

在Angular 9中更新数据时出现CORS错误

2 个答案: