Question

我正在制作一个基本的问题跟踪工具。我可以向构建的后端api发出http请求。除PUT请求外，其他所有请求都可以正常工作。

当我尝试编辑用户详细信息时。我收到以下错误消息

Access to XMLHttpRequest at 'http://trackerapi.sanjayinfotechy.com/api/v1/user/:userId/edit?authToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqd3RpZCI6IlBQT1ROYTlDbSIsImlhdCI6MTU1Njc4NTEwMjQ1NSwiZXhwIjoxNTU2ODcxNTAyLCJzdWIiOiJhdXRoVG9rZW4iLCJpc3MiOiJlZENoYXQiLCJkYXRhIjp7Im1vYmlsZU51bWJlciI6MTIzNDU2LCJmaXJzdE5hbWUiOiJtdW5uYSIsImxhc3ROYW1lIjoiZGhpbmlsIiwidXNlcklkIjoiZWYybU93aVdzIiwiZG9iIjoiMTk5Ni0wMy0wOFQwMDowMDowMC4wMDBaIiwiY29tcGFueU5hbWUiOiJXZWxscyBGYXJnbyIsInJvbGUiOiJBbmFseXN0IiwiZW1haWwiOiJtdW5uYS5kaGluaWxAZ21haWwuY29tIn19.CUctgYPuZmwsZf3rFTQqTWFOsttBdz6bTZFt7mPxYcY' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我尝试在邮递员中执行相同的放置请求时，我能够成功编辑数据而不会出现任何错误。该错误仅在角度4项目中发生。

在下面查看我的代码

http.service.ts文件

public editUserDetails(authToken, userId, data): Observable<any>{

    const params = new HttpParams()
      .set('userId', userId)
      .set('firstName', data.firstName)
      .set('lastName', data.lastName)
      .set('dob', data.dob)
      .set('companyName', data.companyName)
      .set('role', data.role)
      .set('mobileNumber', data.mobileNumber)
      .set('email', data.email)
      .set('password', data.password)

    return this.http.put(`${this.url}/user/:userId/edit?authToken=${authToken}`, params)
  } // end edit user details

这是edit.component.ts文件

public editFunction: any = () =>{
    let data = {
      firstName: this.currentUser.firstName,
      lastName: this.currentUser.lastName,
      dob: this.currentUser.dob,
      companyName: this.currentUser.companyName,
      role: this.currentUser.role,
      mobileNumber: this.currentUser.mobileNumber,
      email: this.currentUser.email,
    }

    this._http.editUserDetails(this.authToken, this.currentUserId, data).subscribe(
      (apiResponse)=>{
        if(apiResponse.status === 200){
          this.toastr.customToastr('Details Edited Successfully')
          setTimeout(()=>{
            this.router.navigate(['/user-info'])
          }, 1500)
        } else {
          this.toastr.warningToastr(apiResponse.message)
        }
      },
      (err)=>{
        console.log(err)
        this.toastr.errorToastr(`Some Error Occured`)
      }
    )
  } // end edit function

使用nodejs在后端api中进行编辑的代码

let editUser = (req, res)=>{
    let options = req.body || req.query || req.params
    UserModel.update({userId: req.params.userId || req.body.userId || req.query.userId}, options, {multi: true}, (err, result)=>{
        if (err) {
            console.log(err)
            logger.error(err.message, 'User Controller: editUser', 10)
            let apiResponse = response.generate(true, 'Failed To Edit User Details', 500, null)
            res.send(apiResponse)
        } else if (check.isEmpty(result)) {
            logger.info('No User Found', 'User Controller: editUser')
            let apiResponse = response.generate(true, 'No User Found', 404, null)
            res.send(apiResponse)
        } else {
            let apiResponse = response.generate(false, 'User Details Edited successfully', 200, result)
            res.send(apiResponse)
        }
    })
} // end edit user

请让我知道我在哪里做错代码。

Answer 1

看看您正在仔细检查的错误，您将得到答案：

请求的请求上没有'Access-Control-Allow-Origin'标头资源。

这是一个CORS问题，而不是您的代码问题。了解有关CORS here的更多信息。

因此，您正在调用的资源（http API）尚未配置为应允许的请求来源并返回响应。

问题很可能是您从其他来源发出了POST请求（您可以在“网络”标签中的chrome开发人员工具中检查请求的来源），并且该API位于其他域中，因此您收到此错误。

请您的API开发人员启用发出此请求的来源。

Answer 2

找到了解决方案。通过更改我的路由中间件中的以下代码”

我写了let标头= {}

我将其更改为var headers = {}

我不知道它如何影响。但它的工作。如果有人知道原因。请让我知道。

无法通过角度发出编辑请求

2 个答案: