使用XMLHttpRequest

时间:2016-12-18 12:44:49

标签: c# asp.net typescript asp.net-core xmlhttprequest

使用WebAPI后端服务器处理新项目,我无法从实际网站发布到控制器,尽管Postman没有问题发布到控制器。我收到错误415,浏览器控制台记录:

HTTP415: UNSUPPORTED MEDIA TYPE - The server is refusing to service the request because the entity of the request is in a format not supported by the requested resource for the requested method.
(XHR)OPTIONS - http://localhost:5000/api/Users

来自Kestrel的日志

info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 OPTIONS http://localhost:5000/api/Users  0
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 OPTIONS http://localhost:5000/api/Users  0
info: Microsoft.AspNetCore.Mvc.StatusCodeResult[1]
      Executing HttpStatusCodeResult, setting HTTP status code 415
Microsoft.AspNetCore.Mvc.StatusCodeResult:Information: Executing HttpStatusCodeResult, setting HTTP status code 415
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action SchoolsChat.Controllers.UserContoller.Post (SchoolsChat) in 2.5323ms
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action SchoolsChat.Controllers.UserContoller.Post (SchoolsChat) in 2.5323ms
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 6.6615ms 415 
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 6.6615ms 415 

我正在尝试发布以下JSON:

{
    UserDOB: "2016-12-18",
    UserFirstName: "asdf",
    UserLastName: "asasdf",
    UserName: "asdf",
    UserSecret: "asdf"
}

使用此TypeScript类

/**
 * JsonPost
 */
class JsonPost {
    private _response: number;
    public get Reponse(): number {
        return this._response;
    }
    constructor(link: string, data: Object) {
        let request = new XMLHttpRequest();
        request.withCredentials = true;

        request.open("POST", APIUri + link, true);
        request.setRequestHeader("content-type", "application/json");
        request.setRequestHeader("cache-control", "no-cache");
        request.onreadystatechange = () => this._response = request.status;
        console.log(request);
        request.send(JSON.stringify(data));
    }
}

用户模型

public class User
    {
        [KeyAttribute]
        public int UserId { get; set; }
        [RequiredAttribute]
        public int SchoolId { get; set; }
        [RequiredAttribute]
        public string UserName { get; set; }
        [RequiredAttribute]
        [DataTypeAttribute(DataType.Password)]
        public string UserSecret { get; set; } // Unnecessary due to school linking?
        [RequiredAttribute]
        public virtual School UserSchool { get; set; }
    }

虽然发布的控制器很简单,但只输出名字

[HttpPost]
    public IActionResult Post([FromBody]User user)
    {
        Console.WriteLine(user.UserName);
        return StatusCode(200);
    }

修改 虽然来自nemec的答案在解决问题方面很有帮助,但我发现对于WebAPI而言,最佳解决方案是仅使用app.UseCors作为服务配置cors。在许多情况下,AdddCors实际上并未在响应中包含必要的标头。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();
            app.UseMvc();
        }

4 个答案:

答案 0 :(得分:34)

在我的情况下,问题是我在动作参数之前添加了date()属性。

自:

FromBody

要:

[HttpPost("Contact")]
public async Task<IActionResult> NewContact([FromBody]Contact contact)

答案 1 :(得分:7)

正如Evan在评论中提到的那样,当您提出跨域ajax请求时,POST会变成OPTIONS。由于浏览器&#39;跨域安全策略,您的web api需要告诉浏览器/ js您的网站可以针对它发出ajax请求。

https://docs.microsoft.com/en-us/aspnet/core/security/cors

  

要为您的应用程序设置CORS,请将Microsoft.AspNetCore.Cors包添加到您的项目中。

     

在Startup.cs中添加CORS服务:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

如果您按照链接的说明操作,甚至可以使用IApplicationBuilder.UseCors进一步自定义允许的网站。

例如:

app.UseCors(builder =>
    builder.WithOrigins("http://example.com")
           .AllowAnyHeader()
);

邮递员是一个应用程序,因此有能力免于跨源规则。

答案 2 :(得分:1)

我们已升级到.NET core 3.0,当您根据查询参数(例如,带有GET请求。

示例:

[HttpGet("Hierarchy")]
public virtual async Task<IActionResult> GetHierarchy([FromServices] IDeviceHierarchyService service, [FromQuery] HierarchyStructureRequest structureLoad)

答案 3 :(得分:0)

不知道为什么,我对.Net Core Web API还是很陌生。我删除了控制器属性[ApiController],一切都准备就绪。

在我的情况下,我在同一项目上具有MVC界面和WebApi。 希望这对某人有帮助。