''Access-Control-Allow-Origin' header is present on the requested resource

Question

Am tring to post data from React.js to localhost insert.php file. When i submit the form from reactjs it gives me error on console Error is :

Access to XMLHttpRequest at 'http://localhost/reactphpdemo/connect.php' 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.

xhr.js:177 POST http://localhost/reactphpdemo/connect.php net::ERR_FAILED
createError.js:16 Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:84)

Here is my code

import React, { Component } from 'react';
import axios from 'axios';

export default class Insert extends Component {
constructor(props){
    super(props);
    this.onSubmit = this.onSubmit.bind(this);

    this.state={
        first_name:'',
        last_name:'',
        email:''
    }
}
onSubmit(e){
    e.preventDefault();
    const obj = {
        headers:{'Access-Control-Allow-Origin':'*'},
        first_name:this.state.first_name,
        last_name:this.state.last_name,
        email:this.state.email,
    };
    axios.post('http://localhost/reactphpdemo/insert.php',obj).then(res=>console.log(res.data));
    this.setState({
        first_name:'',
        last_name:'',
        email:''
    })
}
render() {
    return (
        <form onSubmit={this.onSubmit}>
            <div class="form-group">
                <input type="submit" value="Register User" class="btn btn-primary" name="name" />
            </div>
        </form>
    )   
}

The header must be sent by the server (PHP) not the client (JS). [Origin is not allowed by Access-Control-Allow-Origin](https://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin) — Guy Incognito, Jan 08 '21 at 09:05

score 3 · Accepted Answer · answered Jan 08 '21 at 09:13

3

Just add these to your .php file and it should do the trick:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: 'X-Requested-With,content-type'");
header("Access-Control-Allow-Methods: 'GET, POST, OPTIONS, PUT, PATCH, DELETE'");

Or you could use a Chrome plugin like 'Moesif Origin & CORS Changer'

answered Jan 08 '21 at 09:13

DenisDaniel707

79
2

Hii, DenisDaniel707 Thank you for your replay. should i add the code in insert.php file ? can you explain with path ? where am i install the plugin ? error is shown on all browser not only Chrome how can i resolve it ? can you help me solve this error ? – Ronak Bhatti Jan 08 '21 at 10:13
1

If you are on apache, you can set the headers in .htaccess otherwise this php headers to be sent to every response... so if browser requests: http://localhost/reactphpdemo/connect.php and it to top of the connect.php file – Kapsonfire Jan 08 '21 at 11:05
Yes, you can add it in insert.php but I would add it to the connect.php file like @Kapsonfire said – DenisDaniel707 Jan 08 '21 at 11:30
It's also convenient to use that CORS plugin when on development because you can enable or disable CORS with a switch, if you choose that just remember to turn it off after developing. Here's the link for if you're using Chrome: https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc – DenisDaniel707 Jan 08 '21 at 11:37
Hii DenisDaniel your solution will be work Thanks . – Ronak Bhatti Jan 08 '21 at 13:13

''Access-Control-Allow-Origin' header is present on the requested resource

1 Answers1