Question

我目前正在运行2个容器，一个作为前端（vuejs），一个后端（strapi）在主机中以网络模式运行，这意味着它们使用相同的原始主机，但使用不同的端口。

我对这种编程非常陌生。我使一切正常，但是在尝试改进代码（出于灵活性和可移植性）之后，当将config / myFile.js中的变量导入axios调用时遇到了问题。
目的是要遵循与此示例类似的示例，但是要从config.js中的公共文件导入变量（如下代码所示）：

https://alligator.io/vuejs/rest-api-axios/

我尝试了建议：

我不想尝试其中任何一种，因为它不能解决如下问题：

我使用的是

Vue js（前端）
Strapi（后端）
Docker版本18.06.0-ce
Ubuntu 16.04.5 LTS

这是我在所有浏览器中遇到的错误：

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/

经过几次尝试，我给出了http-common.js，然后将变量直接导入到.vue文件使用的js中，但是遇到了相同的错误。这是代码。

我的config / custom.js

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

我的JS脚本

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);
              })
  },

由于某些原因，当我传递变量时，某些东西会发生巨大变化，而我真的不明白为什么。我尝试了其他几种解决方法，但到目前为止还没有运气，希望你们能为我提供帮助。

为什么从config / custom.js导入变量时会收到跨域请求被阻止的原因

0 个答案: