1

I am using Axios as my HTTP client to call a 3rd party APIs. Express for my server and the cors package to fix the CORS issue by changing the HTTP headers. But the error Failed to load https://api.abalin.net/namedays?day=25&month=11: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. always appears.

Despite using server.options("*", cors());, I tried manually configured the header by adding the configuration options using the cors package as well as the basic configuration recommended by this website. Lastly, I did set the origin to http://http://localhost:3000/.

Server.js

const express = require("express");
const next = require("next");
const cors = require("cors");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    server.options("*", cors());

    server.get("*", (req, res) => {
      return handle(req, res);
    });

    server.listen(3000, err => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

Abalin.js

class Abalin extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    Axios.get("https://api.abalin.net/namedays?day=25&month=11").then(res => {
      console.log(res);
    });
  }

  render() {
    return (
      <div>
        <p>Hello World</p>
      </div>
    );
  }
}

export default Abalin;

Thanks for looking into this question. I appreciate your time and effort.

1 Answers1

3

Use your server to proxy the API, define a route that will make the call to the API server side. Then setup cors to let your front call it.

Gabriel Bleu
  • 9,703
  • 2
  • 30
  • 43
  • I second this! I did this for my startup. I was having loads of issues with CORS when making requests to 3rd party apis. I created a quick express server with the routes I needed, threw it on aws, and gave it a subdomain for SSL. Problem solved! – wnamen Feb 26 '18 at 21:14
  • Hi @wnamen @GabrielBleu Thanks for sharing the solution and experiences. I spent a few days studying about this topic and it worked! I do have some questions 1. What packages are you guys using? As I am using `node-http-proxy` which seems to be inactive. 2. Regarding the subdomains @wnamen mentioned, can they be set using express or it depends on the domain provider? Thanks for reading! –  Mar 02 '18 at 05:44
  • Good job, for proxy you don't need extra module, check this : https://stackoverflow.com/questions/10435407/proxy-with-express-js – Gabriel Bleu Mar 02 '18 at 09:10
  • Thanks, @GabrielBleu ! I tried it and got more errors. I guess I need more understanding of nodejs before using modules. I really do appreciate your time for helping with this issue. :) –  Mar 02 '18 at 14:35
  • @top22 - sorry I took a vacation... think of the subdomain as a separate site. For example, when I threw this on AWS, I used a separate aws ebs container for the express server. The container is mapped specifically to the subdomain and when people navigate to the subdomain, they will receive the code from this server and not the main site. I hope this makes sense! – wnamen Mar 12 '18 at 20:27
  • Thanks @wnamen :) –  Mar 20 '18 at 07:38