Отправка запроса в ASP API из Angular 6

Question

Использование Angular 6 для внешнего интерфейса и Aps Web Api в качестве внутреннего

Я подготовил простую операцию CRUD в ASP, которая прекрасно работает в Postman. | *> Для использования в Почтальоне

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

Но выдает ошибку ниже при попытке отправить с угловым

zone.js: 2969 ПАРАМЕТРЫ "http://localhost:8008/api/user" 405 (метод не разрешен)
localhost /: 1 Доступ к XMLHttpRequest по адресу "http://localhost:8008/api/user"' от источника" http://localhost:4200' был заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: У него нет HTTP, нормально состояние.

Я попытался включить плагин CORS с помощью браузера Chrome

Попробуйте 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. Добавьте ключ ProxyConfig в Angular.json файл:

               "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 запускается на порту 4200 и вызывает proxy.conf.json, поэтому любой запрос API имеет api/*принимает цель от proxy.conf.json