Front-End Connect to Back-End

Code Help
1

Question:

Replit Profile: https://replit.com/@bcsmith11

1 Like
2

I recently went through the Replit video on how to create ChatGPT for your company.

It was not clear on how I can create a fully functional app that includes front-end.

I was able to find out that you can do this by hosting the backend and then do a fetch to the backend url name.

The problem I have right now is that I am getting errors on the URL.

It seems like it is more complex than simply adding the URL into my fetch request. What else do I need to do or add in connection with this URL?

3

What error are you getting?

4

Could you send a link to your Repl?

1 Like
5

promise) TypeError: Failed to fetch
at window.fetch (devtools.js:56:8647)
at fetchReply (script.js:29:28)
at HTMLButtonElement.handleSendMessage (script.js:79:31)

My back end repo URL is:

(‘https://ad-chat-bot-backend.bcsmith11.repl.co’)

6

Please create a new topic for your issue, rather than derailing this one.

2 Likes
7

I’ve allowed this post as I think this is the same user with a dupe account of OP. Is this correct @BenSmith74 @bcsmith11 ?

2 Likes
8

Yes , both are me - not sure why these showed up as two different accounts?

1 Like
9

Any idea on what I can do?

10

Still waiting on this question to be answered - I’ve had some other developers I know look and they are also having problems. I am not sure why there is not more documentation on this process with how important it is to build a functional app…

11

It’s complicated… It seems like you are encountering a CORS…

Try to allow CORS on your server (backend) side.

You can install it with npm install cors

Don’t forget to import the cors package and enable it as middleware in your server-side code

12

You could just add an HTTP header, rather than adding a dependency.

1 Like
13

Thanks! I added CORS and got the following errors:

pp-a1b3af344da8a31f.js:1 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://logs.browser-intake-datadoghq.com/api/v2/logs?ddsource=browser&ddtags=sdk_version%3A4.13.0%2Cenv%3Aproduction%2Cservice%3Awebsite%2Cversion%3A9bd8061&dd-api-key=pub8f051f96eacc650d8df54a4ce53b9374&dd-evp-origin-version=4.13.0&dd-evp-origin=browser&dd-request-id=20b0cc18-a9f2-4317-95e1-74cea9a8f9c0 with MIME type application/json. See Chrome Platform Status for more details.
e.send @ _app-a1b3af344da8a31f.js:1
e.flush @ _app-a1b3af344da8a31f.js:1
(anonymous) @ _app-a1b3af344da8a31f.js:1
v @ _app-a1b3af344da8a31f.js:1
(anonymous) @ _app-a1b3af344da8a31f.js:1
i @ _app-a1b3af344da8a31f.js:1
0070d13d-a68b-434a-bf55-22961ab67cb5.id.repl.co/:1 Access to fetch at ‘https://ad-chat-bot-backend.bcsmith11.repl.co/’ from origin ‘https://0070d13d-a68b-434a-bf55-22961ab67cb5.id.repl.co’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
ad-chat-bot-backend.bcsmith11.repl.co/:1 Failed to load resource: net::ERR_FAILED
devtools.js:109 Fetch error: Failed to fetch
r. @ devtools.js:109
fetchReply @ script.js:49
devtools.js:109 Error fetching reply: Failed to fetch
r. @ devtools.js:109
handleSendMessage @ script.js:82
devtools.js:56 Uncaught (in promise) TypeError: Failed to fetch
at window.fetch (devtools.js:56:8647)
at fetchReply (script.js:29:28)
at handleSendMessage (script.js:79:31)
at HTMLInputElement. (script.js:93:9)

14

Try using a relative URL or opening your website in a new tab.

15

Neither of those worked. We tried connecting it to another API and it worked fine. So, it is definitely something with the backend API.

16

IS anyone able to help? COntinue to get similar error messages. ChatGPT is not able to identify the issue either.

17

Since you already installed CORS you need to make sure it’s configured properly on your server.

Did you update your backend code to include the CORS middleware?

You can do something simple like:

const express = require('express');
const cors = require('cors');

const app = express();

// Add CORS middleware (you can further configure the options if needed)
app.use(cors());

// Your other middleware and routes go here

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

See the documentation to know more about. Like I said it’s complicated… and this may be a blind shot too.

1 Like