Getting a blank page in an external website

Support
, , , ,
1

Hello, I’m trying to show my deployed react SPA http://geotab-addin.netlify.app/ on the website https://my.geotab.com/metislab/#addin-wizard_setup-geotab-addin_netlify_app

In the beginning, I was getting CORS issues, but I managed to solve them by adding the following code in my netlify.toml file:

[build]
functions = “functions”

[[redirects]]
from = “/*”
to = “/index.html”
status = 200

[[headers]]
for = “/"
[headers.values]
Access-Control-Allow-Origin = "”

I have also created a netlify function with the following code:
let HEADERS = {
“Access-Control-Allow-Headers”:
“Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Origin”,
“Content-Type”: “application/json”, //optional
“Access-Control-Allow-Methods”: “POST, OPTIONS”,
“Access-Control-Max-Age”: “8640”,
};

//This solves the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

HEADERS[“Access-Control-Allow-Origin”] = “*”;
HEADERS[“Vary”] = “Origin”;

exports.handler = async function (event, context) {
try {
if (event.httpMethod === “OPTIONS”) {
return { statusCode: “204”, HEADERS };
}
if (event.httpMethod === “POST”) {
const body = JSON.parse(event.body);
//Your code goes here

  return {
    statusCode: 200,
    body: "Success",
    HEADERS,
  };
}
return {
  statusCode: 401,
  HEADERS,
};

} catch (e) {
console.error(e);
return {
statusCode: 500,
body: e.toString(),
};
}
};

However, when I try to see my app on the Geotab website, I just get a blank page. I’ve checked the consoles and no errors at all.

Screenshot_2
Screenshot_21463×856 89.5 KB

The last 2 entries show me a code 204, but I don’t know if the issue is because of this and how to solve it.

I’m stuck at this right now, so I cannot put it in production properly, and any help will be appreciated.

I’ve been using the command “netlify deploy” to upload this and it is connected to Github.

2

Hi, @revanx91.

The site is working when I test. The HTML being sent below exactly matches the file uploaded to Netlify:

$ curl -s https://geotab-addin.netlify.app/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Geotab Add-in</title>
    <script type="module" crossorigin src="/assets/index-39477e3d.js"></script>
    <link rel="stylesheet" href="/assets/index-b381985c.css">
  </head>
  <body>
    <div id="root"></div>

  </body>
</html>

I can find no issues with this site. If you are still seeing issues would you please tell us exactly what steps we need to take to see them ourselves?

1 Like
3

Hi @luke,
Thanks for your reply. I managed to solve it and apparently, the issue was with the library react router dom. It is the first time that I have this issue but it was solved by deleting it.
I don’t know if something is wrong with the code I posted here, but despite the fact I added the “redirects” lines in my netlify.toml file, it wasn’t working

1 Like
4

I’m glad you found your solution!