How to Set up Vue CORS for different domain API?

Question

I' trying to deploy an Vue app which has a separate backend and which will be hosted in different domain. For example:

meow.cat.xyz (App)
api.meow.cat.xyz (API)

Now after npm run build I tried to preview it locally by running serve -s dist and the application is severing at localhost:5000. However the problem is it not sending API request at the current end point (which is localhost:8000 at local and api.meow.cat.xyz at server). I tried config CORS as following

vue.config.js

module.exports = {
  devServer: {
    port: process.env.VUE_APP_DEV_PORT,
    proxy: process.env.VUE_APP_API_ROOT_PATH,
  },
};

.env.development

VUE_APP_API_ROOT_PATH = 'http://localhost:8000/api'
VUE_APP_DEV_PORT = 3000

Note that I'm using axiox. Here is my axios setup.

API.js

import axios from "axios";

const injectAccessToken = (config) => {
  const accessToken = localStorage.getItem("access_token");
  if (accessToken)
    config.headers.common["Authorization"] = `Bearer ${accessToken}`;
  return config;
};

const config = {
  baseURL: process.env.VUE_APP_API_ROOT_PATH,
};

const API = axios.create(config);

API.interceptors.request.use(injectAccessToken);

export default API;

and Using it as following

Login.vue

import API from "@/api/Api";

<script>
  const res= await API.post('login')
</script>

This solution is not working yet. Its sending request at http://localhost:5000. What's the point ? Note that I'm using axios. thanks in advance.

localhost isn't supported for CORS requests: https://stackoverflow.com/questions/10883211/why-does-my-http-localhost-cors-origin-not-work — Daniel Beck, Apr 14 '21 at 12:44
@tauzN It certainly used to be true, and I'm still seeing [present-day links](https://dev.to/andypotts/avoiding-cors-errors-on-localhost-in-2020-4mfn) that suggest there are still workarounds needed. But if I'm wrong, great, apologies for passing along outdated information. — Daniel Beck, Apr 14 '21 at 13:58

score 1 · Answer 1 · answered Apr 14 '21 at 13:00

1

Allow CORS requests from the server

With the Access-Control-Allow-Origin header, you can specify what origins can use your API.

app.get('/api', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.send({
        api: "your request."
    });
})

answered Apr 14 '21 at 13:00

idbrahim

11
3

I edited my question & added how I'm using axios. Can you please recheck & provide the appropriate way to handle the problem for my case ? – Osman Rafi Apr 14 '21 at 13:27

score -1 · Answer 2 · answered Apr 14 '21 at 12:35

-1

Allow CORS from the app's origin on the server (api).

This has nothing to do with with the client (app)

answered Apr 14 '21 at 12:35

tauzN

5,162
2
16
21

How to Set up Vue CORS for different domain API?

2 Answers2

Linked