1

I am currenlty running 2 containers, one as front-end(vuejs) and a back-end(strapi) running with network-mode in host, this means they use the same origin host but different ports.

I am very new into this type of programming. I made everything work, but after trying to improve the code (for flexibility and portability) I ran into a problem when importing variables from config/myFile.js into an axios call.
The goal was to follow a similar example as this one, but importing the variables from a common file in config.js (as shown in the code below):

I have tried what was suggested:

And I don't want to try any of these, as it won't solve the issue like this:

What I use

  • Vue js (Front-end)
  • Strapi (Back-end)
  • Docker version 18.06.0-ce
  • Ubuntu 16.04.5 LTS

This is the error I get in all Browsers:

OPTIONS 10.10.10.4:1377 0 () 
Error: Network Error at createError (createError.js?f777:16) at XMLHttpRequest.handleError (xhr.js?14ed:87)
Network Error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://10.10.10.4:1377/

After several tries I gave upon the http-common.js and I imported the variables directly into my js that is used by my .vue file, but I got the same error. Here is the code.

My config/custom.js

module.exports = {
    cm_url : 'http://10.10.10.4',
    cm_port: '1377'
}

my JS script

import axios from 'axios';
import { RandomPassword } from '../../assets/scripts/PassGen'
var custom = require('../../../config/custom.js')

  methods: { 
  async userList () {
            const token = localStorage.getItem('token')
            //console.log(typeof custom.cm_url)
            //const url = 'http://10.10.10.4:1337/registrationrequest'
            const url = custom.cm_url+':'+custom.cm_port
            const options = {
                method: 'GET',
                url,
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                }
            };
            //baseAuth.get('/registrationrequest')
            axios(options)
              .then(response =>{ 
                 console.log('userList', response.data)
                 for (var element in response.data) {
                     if (response.data[element].status==1){
                         response.data[element].status="Pending";
                     } else if (response.data[element].status==2){
                         response.data[element].status="Accepted";
                     } else {
                         response.data[element].status="Rejected";
                     }

                     var newData ={ 'date': response.data[element]['createdAt'], 
                             'name': response.data[element].name,
                             'lastname': response.data[element].lastname,
                             'email': response.data[element].email,
                             'labs': response.data[element].labs, 
                             'reason': response.data[element].reason, 
                             'status': response.data[element].status, 
                             'actions': '',
                             'id': response.data[element]._id
                     }
                     this.userData.push(newData)

                 }
                 //console.log('NEW ARRAY', this.userData)
                 return (this.userData)

              })
                .catch(err =>{
                  console.log(err);
              })
  },

For some reason when I pass the variables something changes drastically and I really don't undertand why. I tried other several workarounds but no luck so far, I hope you guys can help me.

Pines
  • 47
  • 8
  • You're mixing ES6 and node modules, you should choose one and stick with it, just so it's cleaner, not that it will help. ;) – Emile Bergeron Aug 22 '18 at 17:14
  • The error is related to [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) which should be configured in your backend. – Emile Bergeron Aug 22 '18 at 17:19
  • By that, I mean enabled and some clients whitelisted, like localhost, or a wildcard while in development. https://strapi.io/documentation/configurations/configurations.html – Emile Bergeron Aug 22 '18 at 17:20
  • You also need to handle `OPTION` requests in your backend which are sent by the browser by default when asynchonously requesting to a different domain. – Emile Bergeron Aug 22 '18 at 17:25
  • 1
    @EmileBergeron I checked before how was strapi configured for CORS before, they have the ORIGIN configured with *. `"cors": { "enabled": true, "origin": "*", "expose": [ "WWW-Authenticate", "Server-Authorization" ` And why is this happening when I import the variables and not when putting the string in the url when sending the options in axios? – Pines Aug 22 '18 at 17:30
  • The error comes from the server, so we would need to know: What's the url the client side is served from, what's the url the backend is served from, the minimal code used to make a call (without any business logic from your app) and the minimal code used to handle requests in your backend at the moment. A [mcve] as we refer to on SO. – Emile Bergeron Aug 22 '18 at 17:39
  • @EmileBergeron front-end IP: 10.10.10.4:8081, back-end IP: 10.10.10.4:1337. endpoint in strapi(back-end): /registrationrequest. It is a simple get that returns a list of elements form that endpoint (default in strapi). The minimal code is already in the question. The logic is: use axios.get to retrieve the whatever you have in the strapi endpoint /registrationrequest. In order to do this you need to use the token provided when you log-in to the front-end sotred in `localstorage` (`localStorage.getItem('token')`. – Pines Aug 22 '18 at 18:28
  • The problem is that it is not even sending the request out. When checking in **network** it show OPTIONS, which is doesn't happen when you use this `const url = 'http://10.10.10.4:1337/registrationrequest' instead of this `const url = custom.cm_url+':'+custom.cm_port` – Pines Aug 22 '18 at 18:28
  • Please put all additional information into your answer, removing any irrelevant or outdated info as well from the description. – Emile Bergeron Aug 22 '18 at 19:30
  • This is how CORS is implemented in the browsers. It sends an OPTION request and if it fails (for whatever reason), it won't send the intended request at all. – Emile Bergeron Aug 22 '18 at 19:32
  • Maybe it's a malformed URL? Missing the scheme (`http://`) at the beginning? – Emile Bergeron Aug 22 '18 at 19:32
  • Or inexistant path in your server config? With the root `/` instead of the other path `/registrationrequest` that you tried? – Emile Bergeron Aug 22 '18 at 19:35

0 Answers0