从 Angular 6 向 ASP API 发布请求

Question

前端使用 Angular 6，后端使用 Aps Web Api

我在 ASP 中准备了简单的 CRUD 操作，在 Postman 中可以正常工作。 |*> 在 Postman 中使用

=> Select "Body" Tab
=> Select "raw" Radio Button 
=> Select "JSON (application/json)" from Dropdown

但在尝试使用角度发布时出现以下错误

zone.js:2969 OPTIONS "http://localhost:8008/api/user" 405（不允许的方法）
localhost/:1 从源 'http://localhost:4200' 访问 XMLHttpRequest 在 '"http://localhost:8008/api/user"' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

我试过用 Chrome 浏览器启用 CORS 插件

尝试 1：

const headers = new HttpHeaders().set('content-type', 'application/json');

let userData = 
{
      "name":"Suji",
      "email":"suji@yahoo.com",
      "mobile":"9864224"
}
this.httpClient.post("http://localhost:8008/api/user",userData,{headers})

尝试 2：

const httpOptions = { headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })}; 

let userData = 
{
      "name":"Suji",
      "email":"suji@yahoo.com",
      "mobile":"9864224"
}
this.httpClient.post("http://localhost:8008/api/user",userData,httpOptions);

尝试 3：尝试使用 stringyfy

const headers = new HttpHeaders().set('content-type', 'application/json');

let userData = 
{
      "name":"Suji",
      "email":"suji@yahoo.com",
      "mobile":"9864224"
}
this.httpClient.post("http://localhost:8008/api/user",JSON.stringify(userData),{headers})

尝试 4：尝试使用 stringyfy

const httpOptions = { headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })}; 

let userData = 
{
      "name":"Suji",
      "email":"suji@yahoo.com",
      "mobile":"9864224"
}
this.httpClient.post("http://localhost:8008/api/user",JSON.stringify(userData),httpOptions);

让我知道我在哪里丢失或需要设置什么

Answer 1

您遇到了 CORS 问题，因为 API 和 Angular 应用程序在不同的端口上运行。

您需要创建一个代理来解决此问题：

1. 在您的项目目录中创建proxy.conf.json。

                 {  
                     "/api/*": {  
                       "target": "http://localhost:8008",  
                       "secure": false,  
                       "logLevel": "debug"  
                  }  
               } 
   

2. 在Angular.json文件中添加ProxyConfig键：

               "serve": {  
               "builder": "@angular-devkit/build-angular:dev-server",  
               "options": {  
                   "browserTarget": "YourApp:build",  
                   "proxyConfig": "proxy.conf.json"  
               },
   

3. 更改package.json:

           "scripts": {  
              "ng": "ng",  
               "start": "ng serve --port 4200 --proxy-config proxy.conf.json",  
               "build": "ng build",  
               "test": "ng test",  
               "lint": "ng lint",  
               "e2e": "ng e2e"  
           },
   

4. 现在更改您的服务以使用服务 url 的相对路径：

   this.httpClient.post("/api/user",userData,httpOptions);

现在，发出代理请求的所有设置都已完成。现在，当您使用 npm start 运行应用程序时：

它运行ng serve --port 4200 --proxy-config proxy.conf.json 命令。

Angular App 在端口 4200 上运行并调用 proxy.conf.json，因此任何具有 api/* 的 API 请求都会从 proxy.conf.json 获取目标