0

I have a React app that sends a JSON object to my API through a POST method. I can get a proper response using Post-man, but from my app, there are CORS issues. I want to be able to send the object to my API, and have the API send back a written file. My GET methods work without a problem.

Here are the errors I'm getting:

    xhr.js:166 OPTIONS http://localhost:57429/api/MiniEntity 404 (Not Found)

    Access to XMLHttpRequest at 'http://localhost:57429/api/MiniEntity' from origin 
    'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't 
    pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested 
    resource.

Here is my React code:

    var apiUrl = "http://localhost:57429/api/MiniEntity";
    axios.post(apiUrl, this.state.entitiesToExport).then(response => {
        console.log(response.data);
    });

Here is my C# API code:

    // Post: api/MiniEntity
    [HttpPost]
    public HttpResponseMessage PostMiniEntities([FromBody] object value)
    {
        HttpContext.Response.Headers.Add("access-control-allow-origin", "*");
        var json = JsonConvert.SerializeObject(value);
        System.IO.File.WriteAllText("output.txt", json);
        var dataBytes = System.IO.File.ReadAllBytes("output.txt");
        var dataStream = new MemoryStream(dataBytes);

        HttpResponseMessage httpResponseMessage = new HttpResponseMessage();
        httpResponseMessage.Headers.Add("Access-Control-Allow-Origin", "*");
        httpResponseMessage.Content = new StreamContent(dataStream);
        httpResponseMessage.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
        httpResponseMessage.Content.Headers.ContentDisposition.FileName = "output.txt";
        httpResponseMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        httpResponseMessage.Content.Headers.Add("Access-Control-Allow-Origin", "*");
        httpResponseMessage.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
        httpResponseMessage.Headers.Add("Access-Control-Allow-Methods", "POST, OPTIONS");

        return httpResponseMessage;
    }

All the header stuff is my attempt at allowing access, but it doesn't work.

Aaron
  • 1
  • 2
    Preflight sends an HTTP OPTIONS request before the POST occurs, so the work to set the headers in your post command is never actually hit. Is this ASP WebApi 2, or ASP.NET Core MVC? You should look into configuring CORS as part of your application start either way. – Jonathon Chase Sep 23 '19 at 21:51
  • I see. I noticed that the OPTIONS request was being sent, but didn't know how to handle that. I'm using ASP.NET Core MVC. How do I configure CORS? – Aaron Sep 23 '19 at 22:03
  • [Related SO](https://stackoverflow.com/questions/44379560/how-to-enable-cors-in-asp-net-core-webapi), [Microsoft Docs](https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0) – LeBoucher Sep 23 '19 at 22:10
  • Assuming Core 3.0, you should look at [this document](https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0). If you're using an earlier version of asp core, let us know so we can direct you to the correct solution. – Jonathon Chase Sep 24 '19 at 02:40

1 Answers1

2

Postman doesn't belong to any Origin thats why request is going through.

  1. Startup.cs > ConfigureServices method > add this line services.AddCors();
  2. Startup.cs > Configure method add this: app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

this will enable the CORS through all app.

Lüftü Börtüböcek
  • 21
  • 3
  • This does not provide an answer to the question. You can [search for similar questions](https://stackoverflow.com/search), or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, [ask a new question](https://stackoverflow.com/questions/ask), and include a link to this one to help provide context. Or simply upvote this question. See: [Ask questions, get answers, no distractions](https://stackoverflow.com/tour). – Pedro Rodrigues Sep 24 '19 at 00:15