Error in docking ara-web with ara API interface

[tzkyard]

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

My problem

The ara-web shows an error:

So how to deal with this problem?

[dmsimard]

@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]

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]

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]

@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]

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]

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]

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]

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

[dmsimard]

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

[roskogabor]

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]

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

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

[dmsimard]

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

[roskogabor]

@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.