问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue正式环境如何能配置多个请求的url？

头像
KenOscar
    1k30294483

    vue项目 打包放到服务器上之后 如何能做到 模块1 请求www.xxx1.com的接口，模块2请求www.xxx2.com的接口.... ..

    这种能实现吗？需要怎么配置 动态配置

    vue.js
    阅读 1.6k
    avatarAI BotBETA

    当然可以。你可以通过配置axios或者vue-request等http请求库来实现这个需求。下面以axios为例，给出一个基本的配置方法：

    首先，安装axios：

    npm install axios --save

    然后，在main.js或者需要请求的模块中，导入axios并配置默认请求头信息：

    import axios from 'axios'

axios.defaults.baseURL = 'http://www.xxx1.com' // 根据实际需要更改
axios.defaults.headers.common['Authorization'] = 'Bearer token' // 根据实际需要更改

    在这里，baseURL是你的默认请求url，后面的请求都会在这个url的基础上加上具体的请求路径。而Authorization是一个示例，代表你的请求需要授权，你需要替换成实际的token。你也可以在这里添加其他的公共请求头信息。

    然后，在你的组件中发起请求：

    axios.get('/api/data') // 这里的'/api/data'是请求的具体路径，需要根据实际需要更改

    这样，你就可以在所有请求中默认使用http://www.xxx1.com作为请求url，并可以在每个请求中指定具体的路径。如果你需要使用不同的url，你可以在每个请求中指定不同的路径或者使用不同的http方法。

    对于模块2的请求url是www.xxx2.com的情况，你可以在axios的配置中使用baseURL来区分：

    import axios from 'axios'

axios.defaults.baseURL = 'http://www.xxx2.com' // 根据实际需要更改
axios.defaults.headers.common['Authorization'] = 'Bearer token' // 根据实际需要更改

    然后，在你的模块2的组件中使用axios发起请求：

    axios.get('/api/data') // 这里的'/api/data'是请求的具体路径，需要根据实际需要更改

    这样，你就可以在模块2的所有请求中默认使用http://www.xxx2.com作为请求url，并可以在每个请求中指定具体的路径。

    5 个回答
    得票最新
    头像
    zqbinary
      454

      想了两个方案，一个是axios创建实例的时候就不同前缀，一个是加入拦截器改写配置。
      从长远来说，还是分开比较好。

      const axiosInstanceForXXX1 = axios.create({
    baseURL: 'http://localhost:8001/api/',
    timeout: 5000,
});
const axiosInstanceForXXX2 = axios.create({
    baseURL: 'http://localhost:8002/api/',
    timeout: 5000,
});
const response = await axiosInstanceForXXX1.get('/path');
const response2 = await axiosInstanceForXXX2.get('/path');

      方案2

      instance.interceptors.request.use(
    (config) => {
        let { url } = config;
        // 如果 URL 以 '/module-a' 开头，则修改 baseURL
        if (url && url.startsWith('/module-a')) {
            config.baseURL = 'https://module-a-api.example.com/';
        }
        if (url && url.startsWith('/module-b')) {
            config.baseURL = 'https://module-b-api.example.com/';
        }
        url = url.replace('/module-a/','/')
        config.url = url.replace('/module-b/','/')
        return config;
    },
    (error) => {
        // 处理请求错误
        return Promise.reject(error);
    }
);

      调用

      import api from "./utils/axios.ts";

api.get('/module-a/xx')
api.get('/module-b/xx')

      ps 注意代码健壮性，我就演示一下思路

      头像
      肥皂泡
        38274057

        生产环境，大部分都是通过nginx代理的吧
        给对应模块的接口，加个/xxx1前缀，在nginx做前缀过滤再指向不同模块就行

        头像
        fuGUI
          1.5k2522

          线上发布一般都需要使用nginx反向代理实现不同接口访问不同服务，比如

          server {
    listen       8080;
    listen  [::]:8080;
    server_name  localhost;
    location /api1 {
       proxy_pass http://服务网关1;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For 
      $proxy_add_x_forwarded_for;
    }
    location /api2 {
       proxy_pass http://服务网关2;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For 
      $proxy_add_x_forwarded_for;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
          头像
          youth君
            1867

            上生产的话一般都是相对路径请求的，你在页面中模块1的接口一般会有/m1/xxx的标识，模块2的接口也会有/m2/xxx的标识。

            开发环境下，你肯定是通过配置代理的方式/m1和/m2开头的API分别代理到不同的服务。同理，在开发环境下，也是如此，不过把vue代理改成了nginx

            头像
            Bestime
              4.8k2638

              我一般大概是这样做的，可以参考一下，项目中可能会复杂一点

              // 是否开发模式
const isDev = true

const prefixMap = isDev ? {
  'API_01': 'http://192.168.0.199:456',
  'API_02': 'http://192.168.0.211:8080',
} : {
  'API_01': 'https://www.baidu.com',
  'API_02': 'https://www.google.com',
}

export default function request (options) {
  return axios({
    baseURL: prefixMap[options.baseURL],
    url: options.url
  })
}

// 使用自己封装的函数
request({
  baseURL: 'API_01',
  url: '/get/userinfo/'
})
              查看全部 5 个回答
              推荐问题
              宣传栏