Comments (16)
dmsimard
commented on May 28, 2024
@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 ?
from ara-web.
dmsimard
commented on May 28, 2024
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.
from ara-web.
rndmh3ro
commented on May 28, 2024
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.
from ara-web.
dmsimard
commented on May 28, 2024
@rndmh3ro if you open your browser's javascript console (i.e, right click -> inspect element -> console) and refresh the page, is there any errors ?
from ara-web.
rndmh3ro
commented on May 28, 2024
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
from ara-web.
dmsimard
commented on May 28, 2024
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.
from ara-web.
rndmh3ro
commented on May 28, 2024
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
from ara-web.
rndmh3ro
commented on May 28, 2024
Okay, I don't know (yet) what I did, but know it works. I'll paste my working configuration later.
from ara-web.
dmsimard
commented on May 28, 2024
@rndmh3ro The hostname on which you are accessing ara-web needs to be part of the CORS list.
from ara-web.
roskogabor
commented on May 28, 2024
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?
from ara-web.
rndmh3ro
commented on May 28, 2024
I'm facing the same issue, how you solved it?
Sorry, I did not find a reproducable way to solve this.
from ara-web.
dmsimard
commented on May 28, 2024
@roskogabor how are you setting things up ? what errors are you seeing ?
from ara-web.
roskogabor
commented on May 28, 2024
@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.
from ara-web.
dmsimard
commented on May 28, 2024
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 ?
from ara-web.
roskogabor
commented on May 28, 2024
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:
- http://127.0.0.1:8000
- http://localhost:3000
- http://x.y.z.w -> ip address of the vm where ara-web is installed and running
- http://x.y.z.w:8000
- http://x.y.z.w:3000
- http://dns.domain.com ->hosntame of the computer where I open the webapp
- http://dns.domain.com:3000
- http://dns.domain.com:8000
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?
from ara-web.
roskogabor
commented on May 28, 2024
@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?
from ara-web.
Related Issues (20)
- Add support for pagination in /playbooks
- Add support full static generation HOT 2
- Could the API endpoint be defined at runtime ?
- allow sorting by column headings HOT 1
- search inside a play HOT 2
- feature: search by playbook name HOT 4
- Table dropdown body missing output for `ara_record` actions.
- CORS Issues - can't resolve HOT 7
- Wrong execution time
- Mark as deprecated HOT 3
- Dark theme HOT 3
- CORS I'm struggling HOT 4
- ara-web broken by API changes in ara 1.5
- Retiring ara-web HOT 2
- Implement playbook filtering (search) for name and status
- Playbooks with the --check argument enabled should be highlighted as such HOT 1
- Group Playbook Task results ... per task HOT 17
- Task results expand off screen on mobile
- When no playbooks are found, differentiate between "the api server works but is empty" vs "could not connect to remote api server" HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ara-web.