I have the following code with AngularJS and Web Api, Response to preflight request error is generating, please help

I have the following code with AngularJS and Web Api, Response to preflight request error is generating, please help

<body ng-app="ProductAdd">
    <script>
        angular.module('ProductA**strong text**dd', [])
        .controller('ProductAddController', ['$scope', '$http', function ($scope, $http) {
            $scope.submit = function () {
                if ($scope.Name) {
                    var product = {
                        "Name": $scope.Name,
                        "Category": $scope.Type,
                        "Price": $scope.Price
                    }
                    $http.post('http://localhost:1110/api/product', product).
                    success(function (data, status, headers, config) {
                        alert('Product Added Successfully');
                    }).
                    error(function (data, status, headers, config) {
                        alert("erro");
                    });
                }
            };
        }]);
    </script>
    <h2>Add New Product</h2>
    <form ng-submit="submit()" ng-controller="ProductAddController">
        <div>Name:<input type="text" ng-model="Name" required></div></br>
        <div>Type:<input type="text" ng-model="Type" required> </div> </br>
        <div>Price:<input type="text" ng-model="Price"> </div> </br>
        <div> <input type="submit" id="productsubmit" value="Submit" /></div> </br>
    </form>
</body>

    enter code here


Server Side Code

using Product_API.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using System.Web.Http.Cors;

namespace Product_API.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class ProductController : ApiController
    {

        public static Lazy<List<Product>> products = new Lazy<List<Product>>();//Static variable use only for demo, don’t use unless until require in project. 
        public static int PgaeLoadFlag = 1; // Page load count. 
        public static int ProductID = 4;
        public ProductController()
        {
            if (PgaeLoadFlag == 1) //use this only for first time page load
            {
                //Three product added to display the data
                products.Value.Add(new Product { ID = 1, Name = "bus", Category = "Toy", Price = 200.12M });
                products.Value.Add(new Product { ID = 2, Name = "Car", Category = "Toy", Price = 300 });
                products.Value.Add(new Product { ID = 3, Name = "robot", Category = "Toy", Price = 3000 });
                PgaeLoadFlag++;
            }
        }

        // GET api/product`enter code here`
        public List<Product> GetAllProducts() //get method
        {
            //Instedd of static variable you can use database resource to get the data and return to API
            return products.Value; //return all the product list data
        }

        // GET api/product/5
        public IHttpActionResult GetProduct(int id)
        {
            Product product = products.Value.FirstOrDefault((p) => p.ID == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }

       // POST api/product
        public void ProductAdd(Product product) //post method
        {
            product.ID = ProductID;
            products.Value.Add(product); //add the post product data to the product list
            ProductID++;
            //instead of adding product data to the static product list you can save data to the database.
        }


    }
}


Enable Cors on server side already

But following error on console

 Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

ProductAdd.html:1 XMLHttpRequest cannot load 

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin  is therefore not allo`enter code here`wed access. The response had HTTP status code 405.

Any help will be appreciated

Related posts

Recent Viewed