Frappe. Cross-Origin Request Blocked on localhost

Frappe Framework Bug
1

Hi! I am trying to do some integration with frappe server that is running on localhost (port 8000). My goal is to send login request from React app, that app also runs on localhost (port 3000). I am sending request using axios:

  const loginUrl = 'http://127.0.0.1:8000/api/method/login/';  
  const options = {
       usr: 'someuser@gmail.com',
       pwd: 'some_password'
    };
    const config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
       }
    }
    axios.post(loginUrl, options, config)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });

Traceback of werkzeug is:

INFO:werkzeug:127.0.0.1 - - [10/Jan/2019 09:53:28] "POST /api/method/login/ HTTP/1.1" 200

So, as I can understand, server is getting my request and resposing with success code?
But in browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/method/login/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

And result of console.log(error) is

Error: "Network Error"

Is it problem with my frappe server? Thanks in advance

2
  • Could you solve it? Thanks
3

This is not a problem with frappe server, but a configuration with nginx server. IN your nginx server config file, you have to allow CORS requests. A simple search for CORS nginx will return samples of how to do this. Sorry - I couldnt give you code I used - I’ve done this long back, and I do not remember right now how I did it.

If you are still working on this problem and need help, let me know.

4

Hi @kirthi

I used this nginx.conf modification of the location @webserver:
this gist

But I need to know what headers to send. I am using Vue-axios, but I am still getting the CORS error

Yhanks

5

i get the same issue on localserver …

6

CORS error can be a misleading

Refer to this post

You will have to try to figure out if there is any other issue like data issue, configuration issue or anything else if it is not an actual CORS error. It takes a lot of patience and thorough thinking as to what the possible issue could be and try to fix it.

Hope you are able to figure out the issue and fix it

7

@Manan_Shah hi
am using a local server on my machine / localhost:8001
and other server for front end reactjs /localhost:3000

there is no nginx conf in local development server , unlike production setup

8

Hi @ahmadRagheb
My point was CORS error can be thrown as a false positive as well.
So you will have to figure out what other issue can possibly throw an error.
Again this is just a pointer based on my experience. Even I was getting a CORS error and turned out the error had nothing to do with CORS Policy, the error was thrown due to some data issues.
It is important to know that CORS error can be thrown as a false positive so you can think in other direction to debug the issue.

Good luck

9

I have the same issue.
Can anyone help me?

10

@revant_one solved me the issue in this post