title: Vue fetch post data to controller asp.net mvc
body: <p>I'm using Vue.js and I'm trying to make post request and send data { name: 'TestName' } to controller, but when I hit controller, instead name to be equal to "TestName" it's null.</p>
  
  <p><strong>This is my Fetch: post request</strong></p>
  
  <pre><code>   `sendName() {
          let url = 'https://localhost:44362/Home/ReceiveName'
          fetch(url, {
              method: 'POST',
              body: JSON.stringify({ name: 'TestName' })
          }).then(function (response) {
              response
          }).catch(err =&gt; {
              err
          });
      }`
  </code></pre>
  
  <p><strong>And this is my action method ReceiveName in the HomeController</strong></p>
  
  <pre><code> `[HttpPost]
      public string ReceiveName(string name)
      {
          *some code*
      }`
  </code></pre>
  
  <p>Here name must be "TestName", but it's NULL</p>
  
  <p>I had tried answers from this question <a href="https://stackoverflow.com/questions/44925223/how-to-pass-data-to-controller-using-fetch-api-in-asp-net-core">How to pass data to controller using Fetch api in asp.net core</a> , to set <code>[FromBody]</code> in ReceiveName method like this   <code>public string ReceiveName( [FromBody] string name)</code>, but it doesn't worked for me. Then I tried to add headers to fetch body </p>
  
  <pre><code>`headers: {
    'Content-Type': 'application/json'
  },`
  </code></pre>
  
  <p>But when i do this i get that error in browser </p>
  
  <blockquote>
    <p>Failed to load <a href="https://localhost:44362/Home/ReceiveName" rel="nofollow noreferrer">https://localhost:44362/Home/ReceiveName</a>: Response for preflight does not have HTTP ok status.</p>
  </blockquote>
  
  <p>I think it's because CORS rules.</p>
  
  <p>I'm running my backend on <a href="https://localhost:44362" rel="nofollow noreferrer">https://localhost:44362</a> and my frontend on <a href="http://localhost:8080/" rel="nofollow noreferrer">http://localhost:8080/</a> so I had to edit my CORS rules in web.config like this</p>
  
  <pre><code> `&lt;system.webServer&gt;
    &lt;httpProtocol&gt;
      &lt;customHeaders&gt;
        &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
      &lt;/customHeaders&gt;
    &lt;/httpProtocol&gt;`
  </code></pre>
  
  <p><strong>My question is</strong> - 
  How can I receive my data from Fetch:post to my action method?</p>
  
  <p><em>Is there a need to make query string?</em></p>
  
  <p><em>But I don't want to send my string "TestName"  as <code>FormData</code> I know that if I send it like that I will receive it in my action method, but is this is a good way to send a string?</em></p>