0

I am new to React Redux, and All I already did:

1) activate my backend server (localhost:5000)

2) activate my front-end server using npm start (localhost:8080)

3) I tried to dispatch action by using

this.props.dispatch({type: ActionTypes.FILE_UPLOAD_REQUEST, email: this.state.email, file: this.state.policyFile});

4) Using atlas-saga, and call my service function associated with the dispatch :

let result = yield call(Atlas.uploadFile, action.email, action.file);

5) define the function as :

export const uploadFile = (email, file) => { return fetch(`${BASE_URL}/v1/files/${email}/policies`, { method: 'POST', headers:{} , body: {'file': file} }) .then(response => response.json()) }

After I try to run a function at my react( a function that calls the dispatch), it gives me errors that they cannot found the route. This is the error message from the console.

Fetch API cannot load https://api-staging.autoarmour.co/v1/files/fakeemail@gmail.com/policies. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Yes, I did not create any reducer, just pure function that will upload a file. Thank you

  • 1
    i think problem is the server https://api-staging.autoarmour.co not accept a request from 'http://localhost:8080'. – Giang Le Sep 18 '17 at 03:26
  • Thanks bro, I will wait for other solutions –  Sep 18 '17 at 03:32
  • check this link https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present for more details about this issue – prashant Sep 18 '17 at 03:43

1 Answers1

0

I SOLVE IT, WOHOO!!! The error message means that its not connected at the backend side at all. You need to make sure that it is connected. I solve it by connecting my redux to my react component. Thanks guys

Cheers!