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:
- Disable same origin policy in Chrome
- https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/
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.