.Net WebAPI Post 方法在 Angular2 服务中不起作用

Posted 2023-03-03

【中文标题】.Net WebAPI Post 方法在 Angular2 服务中不起作用

【英文标题】：.Net WebAPI Post method is not working from Angular2 service

【发布时间】：2018-04-28 03:52:33

【问题描述】：

我是 Angular 2 的新手。我正在将表单数据从 Angular 2 发送到 webapi，但它不起作用。 WebAPI：

public class FetchDataController : ApiController
    

        [HttpGet]
        public IList<Student> ListOfStudents()
        
            AppRepository objapp = new AppRepository();
            IList<Student> objData = null;
            objData = objapp.getStudent();
            return objData;
        

        [HttpPost]
        [Route("PostStudent")]
        public JsonResult<Boolean> PostStudent(Student value)
        
            // Append text to an existing file named "WriteLines.txt".
            string data = "ID: " + value.Id + ", FirstName: " + value.FirstName + ",LastName: " + value.LastName + ",Salary: " + value.salary;
            using (StreamWriter outputFile = new StreamWriter(HttpContext.Current.Server.MapPath("~")+ "/TestVD/WriteLines.txt", true))
            
                outputFile.WriteLine(data);
            
            return Json(true);
        

    

我的 WebAPIConfig.js 如下。我在这里添加了 CORS 处理以及 Webconfig 文件：

var cors = new EnableCorsAttribute("http://localhost", "*", "*");
              config.EnableCors(cors);

            // Web API configuration and services
            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
            // Web API routes
            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
            name: "ListOfStudents",
            routeTemplate: "api/controller/id",
            defaults: new  controller = "FetchData", action = "ListOfStudents", id = RouteParameter.Optional 
            );

            config.Routes.MapHttpRoute(
               name: "PostStudent",
               routeTemplate: "api/controller/id",
               defaults: new  controller = "FetchData", action = "PostStudent", id = RouteParameter.Optional 
            );
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/controller/id",
                defaults: new  id = RouteParameter.Optional 
            );

现在，从 Angular 2 开始，我可以使用学生 webAPI 方法列表显示数据，但是在发布时，我从我的 WEBAPI url 得到“405（不允许的方法）”。 我在 WEBAPI post 方法的响应下感到困惑。

ok
:
false
status
:
405
statusText
:
"Method Not Allowed"
type
:
2
url
:
"http://localhost/TestWebService/api/FetchData/"
_body
:
""Message":"The requested resource does not support http method 'POST'.""

我的Angular 2服务代码如下

@Injectable()
export class RssService 
private studentUrl = "http://localhost/TestWebService/api/FetchData/";
    constructor(private http: Http)    
    getStudentList() 
        return this.http.get(this.studentUrl)
            .map(res => <Student[]>res.json())
            .catch(this.handleError);
    
    private handleError(error: Response) 
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    
    postStudent(model: any): Observable<any> 
        let body = JSON.stringify(model);
        let headers = new Headers( 'Content-Type': 'application/json' );
        let options = new RequestOptions( headers: headers );
        console.log('add Student start : ' + body);
        return this.http.post(this.studentUrl , body, options)
            .map((response: Response) => <any>response.json())
            .catch(this.handleError);
    

你能帮帮我吗...

【参考方案1】：

您的 PostStudent 方法上有一个路由属性 [Route("PostStudent")]。

因此，此操作的 URL 不是http://localhost/TestWebService/api/FetchData/，而是http://localhost/TestWebService/PostStudent。

要使用 URL http://localhost/TestWebService/api/FetchData/，只需删除此 Route 属性即可。

如果您仍想对PostStudent 操作使用特定路由并通过http://localhost/TestWebService/api/FetchData/PostStudent 访问它，请在控制器上添加RoutePrefix 属性：

[RoutePrefix("api/FetchData")]
public class FetchDataController : ApiController

查看本文了解模式详情：Attribute Routing in ASP.NET Web API 2

【参考方案2】：

由于 System.Net 和 System.Web 命名空间，我已经解决了它。这个link对我帮助很大。