It was suggested to post here from stackoverflow. Here's hoping.
There are two components to my application:
- A DO 'App' which hosts a react website. This website makes requests to:
- A DO 'Droplet' which hosts an API
When I attempt to connect from my development environment the Droplet, data is returned and the locally deployed react app displays the data.
However, when I deploy the react app onto the DO App and attempt to make the same request, I receive the error: Unhandled Rejection (TypeError): Not allowed to request resource. The browser console provides the following.
Not allowed to request resource
Fetch API cannot load http://xxx.xxx.xxx.xxx:8080/search/ due to access control checks
Unhandled Promise Rejection: TypeError: Not allowed to request resource.
I have attempted both the public IP for the Droplet hosting the API as well as the private IP. The same issue occurs once the application is deployed on the DO app.
Error
What areas can I look where there might be an issue?
const fetchReferences = async () => {
fetch(’http://xxx.xxx.xxx.xxx:8080/search/’, {. //this is the line that errors.
method: ‘POST’,
body: JSON.stringify({
url: searchState.searchCriteria
On the python API I'm allowing everything through:
app = Flask(name)
CORS(app, resources={r"/“: {"origins”: “”}})
api = Api(app)
parser = reqparse.RequestParser()
Logging
Refgator API output log
Refgator API error log
CORS issues?
So...
Why does an instance of the website loaded locally with yarn connect successfully to the droplet?
I suspect that this may be due to having shared keys with the Droplet hosting the API.
Why does an instance of the website loaded on the DO App platform connect without success to the droplet?
I have seen posts relating CORS issues between droplets and apps hosted on Digital Ocean. See here and here.
My knowledge on CORS is non-existent so confirming this is extremely time consuming.
It may be best to move the repo back to bitbucket and attempt to use a droplet rather than an app.
