3

I´m using REACT-JS framework for FRONT-END:

This is my calling action from REDUX-REACT

export function UserLogin(values) {
    var headers = {
        'Access-Control-Allow-Origin': '*',        
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }

    const request = axios.post('http://localhost:8000/login', headers,  values).then(function(response){
        /*() => {callback();}*/
        console.log(response);
    })
    .catch((error) => {
        // Error
        if (error.response) {
            console.log(error.response.data);

        } 
        else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(error.request);
        } 
        else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
        }
    });
    return {
        type: LOGIN_REQUEST_SUCCESS,
        payload: request
    };
}

I´m getting answer from other localhost:8000 for testing purposes.

I´m getting this errors:

Failed to load http://localhost:8000/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

And the console log from error.request

A.A Noman
  • 5,244
  • 9
  • 24
  • 46
  • 1
    This is a CORS (cross origin) issue. Similar question here: https://stackoverflow.com/questions/35164116/cors-error-while-making-axios-get-call Additional troubleshooting in this reddit thread: https://www.reddit.com/r/reactjs/comments/7kfqwi/using_reactjs_axios_how_do_you_bypass_cors_when/ – Gregg B Dec 20 '17 at 16:28
  • The server should support CORS requests. In case you have an access to your server you should configure it to send those headers. Just google cors to read about it. And if you are using node.js and express you can take a look at [cors](https://www.npmjs.com/package/cors) middleware. – coockoo Dec 20 '17 at 16:30
  • No i´m using laravel, and i´m using axios sending headers to solve CORS problem @GreggB –  Dec 20 '17 at 16:34
  • @coockoo i´m using headers in AXIOS! –  Dec 20 '17 at 16:34
  • Have you added: `withCredentials: true` – Gregg B Dec 20 '17 at 16:36
  • @OlympikeSoft yeah, you add your headers when you send your request from frontend and you have to add CORS headers with your server response from backend as well. – coockoo Dec 20 '17 at 16:40
  • @coockoo any example for that? –  Dec 20 '17 at 16:51
  • @OlympikeSoft here you go https://gist.github.com/drewjoh/43ba206c1cde9ace35de154a5c84fc6d – coockoo Dec 20 '17 at 16:53

1 Answers1

0

You should set 'Access-Control-Allow-Origin': '*', at server's response header.

For more details, check this answer.

Jan Cássio
  • 2,076
  • 29
  • 41