title: Refused to execute a script because its hash, its nonce, or 'unsafe-inline' Error
body: <p>I was trying to fix this error I was facing:</p>
  <p>&quot;Refused to execute a script because its hash, its nonce, or 'unsafe-inline' appears in neither the script-src directive nor the default-src directive of the Content Security Policy.&quot;</p>
  <p>I'm trying to make a contact us page and its unable to POST.</p>
  <pre><code>import React, {useState,setState} from 'react';
  import &quot;./Contactus.css&quot;;
  import axios from 'axios';
  
  class Contactus extends React.Component{
  
    constructor(props) {
      super(props);
      this.state = {
        name: '',
        email: '',
        message: ''
      }
    }
    
     handleSubmit(e){
      e.preventDefault();
      axios({
        method: &quot;POST&quot;,
        url:&quot;http://localhost:3002/send&quot;,
        data:  this.state
      }).then((response)=&gt;{
        if (response.data.status === 'success') {
          alert(&quot;Message Sent.&quot;);
          this.resetForm()
        } else if (response.data.status === 'fail') {
          alert(&quot;Message failed to send.&quot;)
        }
      })
    }
  
    resetForm(){
      this.setState({name: null, email: null, message: null})
    }
  render() {
    return (
      &lt;div className=&quot;contact-form-box&quot;&gt;
  
        &lt;h1&gt; Contact Us&lt;/h1&gt;
        &lt;form id=&quot;contact-form&quot; onSubmit={this.handleSubmit.bind(this)} method=&quot;POST&quot;&gt;
      &lt;div className=&quot;form-group&quot;&gt;
          &lt;label htmlFor=&quot;name&quot;&gt;Name&lt;/label&gt;
          &lt;input type=&quot;text&quot; className=&quot;form-control&quot; /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
          &lt;label htmlFor=&quot;exampleInputEmail1&quot;&gt;Email address&lt;/label&gt;
          &lt;input type=&quot;email&quot; className=&quot;form-control&quot; aria-describedby=&quot;emailHelp&quot; /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-group&quot;&gt;
          &lt;label htmlFor=&quot;message&quot;&gt;Message&lt;/label&gt;
          &lt;textarea className=&quot;form-control&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
       &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  onNameChange(event) {
    this.setState({name: event.target.value})
  }
  
  onEmailChange(event) {
    this.setState({email: event.target.value})
  }
  
  onMessageChange(event) {
    this.setState({message: event.target.value})
  }
  
  handleSubmit(event) {
  }
  }
  
  export default Contactus; 
  </code></pre>
  <p>I have tried adding a META tag outlining the content security policy in the index.js file but it created more errors alongside the original ones</p>