Do I have the right URL and CORs Config? If so, why the error?

[tim-rohrer]

I thought I'd try out this new feature.

Here is the relevant code in my API that has been deployed to my Caprover server as srv-captain--my-api. It should be listening on port I have specified.

  private mountRoutes(): void {
    const router = express.Router();
    router.post('/fetch', (req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      try {
        // code to handle call
      } catch (error) {
        next(error);
      }
    });
    this.express.use(express.json({ limit: '50mb' }));
    this.express.use(cors());
    ...
  }

In my front-end React code, I'm calling this using:

const response = await axios.post('http://srv-captain--my-api:[port]/api/fetch', rqstPackage);

But I continue to get the errors:

[Error] A server with the specified hostname could not be found.
[Error] XMLHttpRequest cannot load http://srv-captain--my-api/api/fetch due to access control checks.
[Error] Failed to load resource: A server with the specified hostname could not be found. (fetch, line 0)

I recognize the problem may simply be that I have the cors setup wrong (I thought what I had would be fully permissive), but I am also looking for a confirmation that I am reading the errors correctly, and that I have the axios call correct?

[githubsaturn]

You need to use your exposed URL for your api:

const response = await axios.post('http://my-api.yourdomain.com/api/fetch', rqstPackage);

[tim-rohrer]

Hmmm. Okay, something else isn't correct with my setup.

I've switched over to my server for some cli interaction. docker logs <containername> reports "server is listening on [port]" which is what I expected to be the case.

However, if I try to use curl against the api, I get "connection refused". So then I used netstat -tunlp to inspect ports. The port I'm trying to use is not listed. BTW, docker ps does show the container and states it is listening on the desired port.

I should also note the CRA-based app is showing up on the port I have selected for it, so I'm believe this issue is related specifically to the API and how I deployed it. At least that is my best guess.

I then switched this setting for 80 to my desired port

but no change.

Suggestions on what I should be checking next?

Thank you.

[githubsaturn]

If you have your API and your frontend code open source, post it here and we can look into that.

[tim-rohrer]

For the API:

import * as path from 'path';
import * as dotenv from 'dotenv';
import app from './App';

const dotEnvPath = path.resolve('./.env');
dotenv.config({ path: dotEnvPath });

try {
  const port = process.env.PORT || 3000;
  app.listen(port, () => console.log(`server is listening on ${port}`)).on('error', (err) => console.log(err));
} catch (error) {
  throw new Error('Error starting server.');
}

As I mentioned above, when I issue docker logs <api_container>, I get the message "server is listening on 3000".

And App.ts less details of what the API does:

class App {
  public express: express.Application;

  private storedRoutes: any = {};

  constructor() {
    this.express = express();
    this.mountRoutes();
  }

  private mountRoutes(): void {
    const router = express.Router();
    router.post('/fetch', (req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      try {
       // Implementation details
        res.json(appResults);
      } catch (error) {
        next(error);
      }
    });
    this.express.use(express.json({ limit: '50mb' }));
    this.express.use(cors());
    this.express.use('/api', router);
    this.express.use((error: Error, req: any, res: any, next: any) => {
      console.log('Server error: ', error);
      res.status(500)
        .send(`An unexpected server error occurred: ${error.message}`);
    });
  }
}

export default new App().express;

For the front-end, the call currently is:

  const response = await axios.post(
    'http://<server.mydomain.net>:3000/api/fetch',
    rqstPackage
  );

If I have the API and front end running on my laptop, no issues. I've also gotten it to work before on my remote server if I start them in development mode. However, I seem to get stuck when I try to deploy for real. As I said, I'd suspect a cors issue more than anything, but I'm not understanding why the API isn't showing up on the designated port.

Thank you again for taking the time to look at this.

[githubsaturn]

First, make sure your API works. Set container HTTP port to 3000 and try the API URL on your browser, if that doesn't work, set Container HTTP port to 80 and try again. Only after you get your API to work, then focus on your frontend

[tim-rohrer]

The API works.

Not sure, but maybe there was a some black magic involved after all :-) This morning when I went to try some different configurations, I noticed I was now getting an Exited (137) 18 hours ago when I ran docker ps -a. I hadn't seen that before. So, then I went into the Caprover Dashboard/App page, clicked on the API, then Save & Update. Things worked after that. I haven't researched 137 yet.

Just now, I went back to docker ps -a and now note the original instance of the API says Existed (137) 7 hours ago, which coincides with when I restarted using the Save & Update. And the new instance shows that it has been running for 7 hours.

Not sure if any of this makes sense to you, but I'm wondering if the issue had to do with my unchecking "Do not expose as a web-app"?

In any case, I may try to experiment some more with it later this afternoon.