CORS issue & < <doctype syntax error for react app

chaitanya · April 2, 2023, 8:57pm

https://letsgoparty.netlify.app/

VM21:1 Uncaught (in promise) SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON

// this is the error I get when I place Base_API_url : https://letsgoparty.netlify.app/,
// in local environment I use http://localhost:3000 which gets me the results

CORS error

//this error pops when I try to use Base_API_url : https://serpapi.com , this is the API provider, I get results in network tab with cors error and results as well…

my _headers config file
/api/*
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization

my netlify.toml config file
[[headers]]
for = “/"
[headers.values]
Access-Control-Allow-Origin = "”
Access-Control-Allow-Methods = “GET”
Access-Control-Allow-Headers = “Content-Type”

https://github.com/curioushumans/Eat-Rave-Love , repo for additional info…this is my first application deploying here and struggling since days and countless forums and found nothing

SamO · April 3, 2023, 4:59pm

Hi @chaitanya ,

Can you share your developer console?

chaitanya · April 3, 2023, 9:46pm

chaitanya · April 3, 2023, 9:46pm

chaitanya · April 3, 2023, 9:47pm

netlify.toml file code

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET"
    Access-Control-Allow-Headers = "Content-Type"


[[redirects]]
  from = "/search/*"
  to = "https://serpapi.com/:splat"
  status = 200
  headers = { Access-Control-Allow-Origin = "*" }

_headers file code

/api/* 
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization

my main search-bar code requesting URL:

chaitanya · April 3, 2023, 9:47pm

server.js file that acts as proxy:

jasiqli · April 3, 2023, 11:13pm

I cannot replication this error. The error I see is 406 Not Acceptable

chaitanya · April 3, 2023, 11:42pm

thats strange, for me i could see the same error VM280:1 Uncaught (in promise) SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON

jasiqli · April 3, 2023, 11:54pm

This means that what is returned in the response isn’t valid JSON, it is a HTML document. Inspecting the Response (if indeed you are still receiving the same response still) in developer tools might help determine what the server is trying to tell you.

Also, the repository you have shared is private.

chaitanya · April 4, 2023, 8:33am

my bad, i have changed the repo and this is the link, GitHub - curioushumans/letsgoparty
and yes the response I am getting is an html

chaitanya · April 4, 2023, 9:17am

this gives me expected json results

http://localhost:4000/search?q=california&engine=google_events&htichips=&start=0&source=nodejs&output=json&api_key=api-key

but not this…it redirects me to seprapi homepage, in a text/html format…

https://letsgoparty.netlify.app/search?q=california&engine=google_events&htichips=&start=0&source=nodejs&output=json&api_key=api-key

jasiqli · April 4, 2023, 9:18am

Using california for a test search as you did, I still see status 406. The URL is (formatted for readability)

https://letsgoparty.netlify.app/search
?q=california&engine=google_events
&htichips=&start=0&source=nodejs&output=json
&api_key=348e8db09351ac50bd0d138aa02fa794c792d94070d5fc3a628ea00c94025b64

First thing to note is the api_key is embedded in it. If you wish to keep information private I suggest reading [Support Guide] How do I keep my API keys/tokens safe using Netlify Functions?

I see from the repository and an early post a proxy redirect

Using this URL in place of that of your Netlify URL yields

https://serpapi.com/?q=california&engine=google_events
&htichips=&start=0&source=nodejs&output=json
&api_key=348e8db09351ac50bd0d138aa02fa794c792d94070d5fc3a628ea00c94025b64

Following this in a browser returns the SerpApi homepage. Why? Because the redirect URL is missing the /search path. This is how it should look

https://serpapi.com/search?q=california&engine=google_events
&htichips=&start=0&source=nodejs&output=json
&api_key=348e8db09351ac50bd0d138aa02fa794c792d94070d5fc3a628ea00c94025b64

As mentioned here query parameters are automatically pass through. So to get it working properly change the above redirect to

[[redirects]]
  from = "/search"
  to = "https://serpapi.com/search"
  status = 200
  headers = { Access-Control-Allow-Origin = "*" }

(I tested this locally and it works correctly.)

chaitanya · April 4, 2023, 10:40am

i have updated the same and tried other options like

[[redirects]]
  from = "/search"
  to = "https://serpapi.com/search?q=:query&engine=google_events&htichips=:filter&start=:pageNumber&source=nodejs&output=json&api_key=348e8db09351ac50bd0d138aa02fa794c792d94070d5fc3a628ea00c94025b64"
  status = 200

[[redirects]]
  from = "/search"
  to = "https://serpapi.com/search?q=:query&engine=google_events&htichips=:filter&start=:start&source=nodejs&output=json&api_key=348e8db09351ac50bd0d138aa02fa794c792d94070d5fc3a628ea00c94025b64"
  status = 200
  force = true
  headers = { Access-Control-Allow-Origin = "*" }

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

[[redirects]]
  from = "/search"
  to = "/search"
  status = 200

and finally the one you have provided…and right you can test it, as its the updated deployment

and unfortunately everything provide me same results with the text/html content

chaitanya · April 4, 2023, 10:45am

and for us to be on the same page, this is the URL used in server.js file

  const url = `https://serpapi.com/search?q=${query}&engine=google_events&htichips=${filter}&start=${
    (pageNumber - 1) * 10
  }&source=nodejs&output=json&api_key=api-key`;

and in the main searchbar.js where the API is define,

const API_BASE_URL = "https://letsgoparty.netlify.app";

const SearchBar = () => {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [showComponents, setShowComponents] = useState(false);
  const [filter, setFilter] = useState("");
  const [pageNumber, setPageNumber] = useState(1);


  const search = async (query, filter, pageNumber) => {
    const url = `${API_BASE_URL}/search?q=${query}&engine=google_events&htichips=${filter}&start=${
      (pageNumber - 1) * 10
    }&source=nodejs&output=json&api_key=api-key`;
    const headers = {
      "Content-Type": "application/json",
      Authorization:
        "Bearer api-key",
      Accept: "application/json",
    };

    const response = await fetch(url, { headers });
    const data = await response.json();

    setResults(data.events_results);
    setShowComponents(true);
  };

jasiqli · April 4, 2023, 11:20am

Why are you using your Netlify site domain as the API URL instead of the SerApi domain?

Edit:

I cloned your repository to test.

Setting the API_BASE_URL to a blank string e.g.

const API_BASE_URL = "";

solves the issue.
Alternatively remove the ${API_BASE_URL} from the const url =....

Doing this means the search is done via the proxy/rewrite which then (as tested locally) negates the CORS issue and returns results

chaitanya · April 4, 2023, 11:40am

i just dont know what to say! you are a saver!, I thought adding netlify domain routes it to the domain, avoiding cors…thank you so much!!

SamO · April 4, 2023, 2:35pm

Hi @chaitanya i’m glad you were able to find your solution and @jasiqli could be of help!