I was trying to fix this error I was facing:
"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."
I'm trying to make a contact us page and its unable to POST.
import React, {useState,setState} from 'react';
import "./Contactus.css";
import axios from 'axios';
class Contactus extends React.Component{
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
message: ''
}
}
handleSubmit(e){
e.preventDefault();
axios({
method: "POST",
url:"http://localhost:3002/send",
data: this.state
}).then((response)=>{
if (response.data.status === 'success') {
alert("Message Sent.");
this.resetForm()
} else if (response.data.status === 'fail') {
alert("Message failed to send.")
}
})
}
resetForm(){
this.setState({name: null, email: null, message: null})
}
render() {
return (
<div className="contact-form-box">
<h1> Contact Us</h1>
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div className="form-group">
<label htmlFor="name">Name</label>
<input type="text" className="form-control" />
</div>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" aria-describedby="emailHelp" />
</div>
<div className="form-group">
<label htmlFor="message">Message</label>
<textarea className="form-control" rows="5"></textarea>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
);
}
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;
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