Question

将Angular 6用作前端，将Aps Web Api用作后端

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

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

但是在尝试用角度发布时给出了以下错误

zone.js：2969选项“ http://localhost:8008/api/user” 405（不允许使用方法）
本地主机/：1已从CORS策略阻止对来自源“ http://localhost:8008/api/user”的“ http://localhost:4200”处的XMLHttpRequest的访问：对预检请求的响应未通过访问控制检查：没有HTTP正常状态。

我尝试过使用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

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

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

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

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

在Angular.json文件中添加ProxyConfig密钥：

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

更改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"  
        },

现在更改您的服务以使用服务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中获取目标

从Angular 6向ASP API发布请求

1 个答案: