Dec-22-2021, 11:38 PM
I have a Django app with a React frontend but I can't make requests. I've tried with fetch and axios to post requests to an endpoint from a login form but the error persists. I''ve also installed
Here is the error from the console:
django-cors-headers
but with the same result. Don't know why CORS isn't enabled despite the settings.Here is the error from the console:
Error:Access to XMLHttpRequest at 'https://some-api-endpoint/' from origin 'http://localhost:7000' 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. POST https://some-api-endpoint/ net::ERR_FAILED
Here's the project tree:Output:|_______app
|_______myProject
|_______reactFolder
|_______static
|_______templates
manage.py
requirements.txt
Here's the settings.py:ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ ... 'corsheaders', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] CORS_ORIGIN_WHITELIST = [ 'http://127.0.0.1:7000', 'http://localhost:3000', ] CORS_ALLOWED_ORIGIN_REGEXES = [ 'http://localhost:3000', 'http://127.0.0.1:7000', 'https://some-api-endpoint.com', ] CORS_ALLOW_CREDENTIALS = True CORS_ALLOW_HEADERS = [ 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', ]The React component:
class Login extends Component { constructor(props) { super(props) this.state = { user_name: '' , password: '', }} changeHandler = (e) => { this.setState({[e.target.name]: e.target.value}) } submitHandler = e => { e.preventDefault() console.log(this.state) axios.post('https://some-api-endpoint/', this.state, {headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept'}}).then( response => { console.log(response) }).catch(error => { console.log(error) }) } render() { const {user_name, password} = this.state return( <form onSubmit={this.submitHandler}> <input type='text' name='user_name' value={user_name} onChange={this.changeHandler} /> <input type='password' name='password' value={password} onChange={this.changeHandler} /> <button type='submit'>Submit</button> </form> )} } export default Login;