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">
        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) {
    <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>

    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 });

        // 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
            //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