search

ansible-community / ara-web

Stateless web client for the ARA Records Ansible API.
https://ara.recordsansible.org
GNU General Public License v3.0
37 stars 8 forks source link

Error in docking ara-web with ara API interface #16

Open tzkyard opened 5 years ago

tzkyard commented 5 years ago

My os

CentOS Linux release 7.6.1810 (Core) 3.10.0-957.el7.x86_64

version of npm

[root@server-ara public]# npm --version 5.6.0

Some configure file

ara-web/public/config.json  
{
  "apiURL": "http://192.168.6.141:8000"
}

The status of ara api and ara-web

image
image

My problem

The ara-web shows an error: image

So how to deal with this problem?

dmsimard commented 5 years ago

@tzkyard Hi and thanks for the report !

Does it work if you add 192.168.6.141 in the ARA_CORS_ORIGIN_WHITELIST setting for the API server ?

Do you see an error in your browser's javascript console ?

dmsimard commented 5 years ago

Hi @tzkyard. Have you been able to make it work with ARA_CORS_ORIGIN_WHITELIST ?

Would like to know so we can take the appropriate action for this issue.

rndmh3ro commented 5 years ago

I'm having the same problem. Here's my ara-api settings.

CORS_ORIGIN_ALLOW_ALL doesn't seem to have an effect.

CORS_ORIGIN_WHITELIST is set to all IP-addresses and domain names, this ec2-instance has.

  CORS_ORIGIN_ALLOW_ALL: true
  CORS_ORIGIN_REGEX_WHITELIST: !!python/object:box.BoxList
    box_class: *id001
    box_options: {}
    box_org_ref: 0
  CORS_ORIGIN_WHITELIST: !!python/object/new:box.BoxList
    listitems:
    - http://127.0.0.1:8000
    - http://127.0.0.1:3000
    - http://localhost:3000
    - http://localhost:8000
    - http://ec2-3-122-159-152.eu-central-1.compute.amazonaws.com:3000
    - http://ec2-3-122-159-152.eu-central-1.compute.amazonaws.com:8000
    - http://ec2-3-122-159-152.eu-central-1.compute.amazonaws.com
    - http://3.122.159.152:3000
    - http://3.122.159.152:8000
    - http://3.122.159.152
    - http://172.31.4.185:3000
    - http://172.31.4.185:8000
    - http://172.31.4.185

I even tried to remove the cors-code from the ara-api but nothing seems to help.

dmsimard commented 5 years ago

@rndmh3ro if you open your browser's javascript console (i.e, right click -> inspect element -> console) and refresh the page, is there any errors ?

rndmh3ro commented 5 years ago

Yes:

Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/v1/. (Reason: CORS request did not succeed).

Error: "Network Error"
    createError createError.js:17
    handleError xhr.js:87
index.js:1437
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/v1/playbooks. (Reason: CORS request did not succeed).

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://a3aff931-2f9f-431e-ba6c-fbb89fb44646/lib/tp/browser-polyfill.min.js
Source Map URL: browser-polyfill.min.js.map

Chrome:

index.js:1437 Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)
console.<computed> @ index.js:1437
(anonymous) @ App.js:29
Promise.catch (async)
componentDidMount @ App.js:26
commitLifeCycles @ react-dom.development.js:18115
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
scheduleRootUpdate @ react-dom.development.js:21610
updateContainerAtExpirationTime @ react-dom.development.js:21636
updateContainer @ react-dom.development.js:21704
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22017
(anonymous) @ react-dom.development.js:22169
unbatchedUpdates @ react-dom.development.js:21492
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22165
render @ react-dom.development.js:22240
./src/index.js @ index.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ task.js:41
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
xhr.js:173 GET http://127.0.0.1:8000/api/v1/ net::ERR_CONNECTION_REFUSED
dispatchXhrRequest @ xhr.js:173
xhrAdapter @ xhr.js:18
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:55
wrap @ bind.js:11
(anonymous) @ authActions.js:15
(anonymous) @ index.js:8
(anonymous) @ App.js:26
Promise.then (async)
componentDidMount @ App.js:24
commitLifeCycles @ react-dom.development.js:18115
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
scheduleRootUpdate @ react-dom.development.js:21610
updateContainerAtExpirationTime @ react-dom.development.js:21636
updateContainer @ react-dom.development.js:21704
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22017
(anonymous) @ react-dom.development.js:22169
unbatchedUpdates @ react-dom.development.js:21492
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22165
render @ react-dom.development.js:22240
./src/index.js @ index.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ task.js:41
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
xhr.js:173 GET http://127.0.0.1:8000/api/v1/playbooks net::ERR_CONNECTION_REFUSED
dispatchXhrRequest @ xhr.js:173
xhrAdapter @ xhr.js:18
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:55
Axios.<computed> @ Axios.js:65
wrap @ bind.js:11
(anonymous) @ playbooksActions.js:7
(anonymous) @ index.js:8
getPlaybooks @ PlaybooksPage.js:129
componentDidMount @ PlaybooksPage.js:31
commitLifeCycles @ react-dom.development.js:18115
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
enqueueSetState @ react-dom.development.js:11596
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:336
(anonymous) @ App.js:34
Promise.then (async)
componentDidMount @ App.js:31
commitLifeCycles @ react-dom.development.js:18115
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
scheduleRootUpdate @ react-dom.development.js:21610
updateContainerAtExpirationTime @ react-dom.development.js:21636
updateContainer @ react-dom.development.js:21704
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22017
(anonymous) @ react-dom.development.js:22169
unbatchedUpdates @ react-dom.development.js:21492
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22165
render @ react-dom.development.js:22240
./src/index.js @ index.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ task.js:41
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
dmsimard commented 5 years ago

Thanks @rndmh3ro !

I see the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/v1/. (Reason: CORS request did not succeed).

Where is ara-web hosted relative to the API server ?

I ask because ara-web queries the API server through your web browser -- hence the need for CORS. That error means ara-web is attempting to query an API server local to the machine where your browser is (ex: your laptop), not local to where ara-web is hosted (ex: if the API and ara-web services are running on the same server).

You can adjust the URL where the API server is expected to be with config.json. The address you put there should be accessible from your browser.

rndmh3ro commented 5 years ago

Where is ara-web hosted relative to the API server ? On the same server.

That error means ara-web is attempting to query an API server local to the machine where your browser is (ex: your laptop), not local to where ara-web is hosted (ex: if the API and ara-web services are running on the same server).

I didn't know that, thanks!

You can adjust the URL where the API server is expected to be with config.json. The address you put there should be accessible from your browser.

Did that:

{
  "apiURL": "http://3.122.159.152:8000"
}

I can access the URL from my browser and get the basic api-view.

Now I get another error message in the javascript console:

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

the ara-api server logs look good:

segu@ip-172-31-4-185:~$ sudo /usr/local/bin/ara-manage runserver 0.0.0.0:8000
2019-11-21 16:14:15,692 INFO django.utils.autoreload: Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 21, 2019 - 16:14:16
Django version 2.2.7, using settings 'ara.server.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
[21/Nov/2019 16:14:20] "GET /api/v1/ HTTP/1.1" 200 411
[21/Nov/2019 16:14:20] "GET /api/v1/playbooks HTTP/1.1" 200 1112
[21/Nov/2019 16:14:31] "GET /api/v1/ HTTP/1.1" 200 411
[21/Nov/2019 16:14:31] "GET /api/v1/playbooks HTTP/1.1" 200 1112
rndmh3ro commented 5 years ago

Okay, I don't know (yet) what I did, but know it works. I'll paste my working configuration later.

dmsimard commented 5 years ago

@rndmh3ro The hostname on which you are accessing ara-web needs to be part of the CORS list.

roskogabor commented 4 years ago

Okay, I don't know (yet) what I did, but know it works. I'll paste my working configuration later.

Hello, I'm facing the same issue, how you solved it?

rndmh3ro commented 4 years ago

I'm facing the same issue, how you solved it?

Sorry, I did not find a reproducable way to solve this.

dmsimard commented 4 years ago

@roskogabor how are you setting things up ? what errors are you seeing ?

roskogabor commented 4 years ago

@roskogabor how are you setting things up ? what errors are you seeing ?

I have a vm with ansible, I installed ara-server there with a nginx reverse proxy and I installed ara web on an another vm. Ara-manage runserver is working, everythings fine on the other side after npm start, but in the browser I get: Server located at http://x.y.z.w:8000 is unreachable. Check your configuration. Verify that cross-origin requests are not blocked. In the devtools: Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:83) xhr.js:178 GET http://x.y.z.w:8000/api/v1/playbooks net::ERR_CONNECTION_TIMED_OUT

Ips and domain names are in Cors_WHITE_list file on the server, thne nginx reverse proxy in the apiurl in the ara-web config, but when I tried from another computer what also in the white list it say cross origin request is disabled. Doesnt matter I set allow_all to true. Weird but in nginx logs I dont see anything and the browser try to access to ara-server not the nginx proxy. At the moment Im not fully understand how does it work and how it should be to work right.

dmsimard commented 4 years ago

If you open your browser's inspector window and look at the console, do you see an actual CORS error or something else ?

Another common issue is the assumption that ara-web communicates or connects with the ARA API directly while in fact it does not -- the query comes from your browser, not from the server where ara-web is hosted. Are you able to reach your API server in your browser ?

roskogabor commented 4 years ago

In the inspector I see this: xhr.js:178 GET http://x.y.z.w:8000/api/v1/ net::ERR_FAILED playbooks:1 Access to XMLHttpRequest at 'http://x.y.z.w:8000/api/v1/playbooks' from origin 'http://x.y.z.w:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ->this is what I dont understand, because: on the API side server in the config file it is already: CORS_ORIGIN_ALLOW_ALL: true CORS_ORIGIN_REGEX_WHITELIST: [] CORS_ORIGIN_WHITELIST:

If I ping the ip and 8000 port from here with nping I get answer. I used nginx reverse proxy for testing purpose without any result, Im stuck with this problem and try to find any topic on any forum where I can get any idea how to solve this but at the moment have no idea what am doing wrong. Is there any way to set Access-Control-Allow-Origin header?

roskogabor commented 4 years ago

@dmsimard Update: I was able to fix some problem, and this is what I see on command line on the ara-server, on the browser:

2020-05-11 10:59:51,583 WARNING django.request: Bad Request: /api/v1/playbooks [11/May/2020 10:59:51] "GET /api/v1/playbooks HTTP/1.1" 400 66390 Invalid HTTP_HOST header: '111.111.111.111'. You may need to add '111.111.111' to ALLOWED_HOSTS. ->this is the ip of the API server, it is in the allowed hosts as localhost, 127.0.0.1 and ip, I get this when I open directly the api url 2020-05-11 10:59:58,690 ERROR django.security.DisallowedHost: Invalid HTTP_HOST header: '111.111.111.111'. You may need to add '111.111.111.111' to ALLOWED_HOSTS. Bad Request: / 2020-05-11 10:59:58,748 WARNING django.request: Bad Request: / [11/May/2020 10:59:58] "GET / HTTP/1.1" 400 66278 -> I get this on ara-web Any idea what should I check?