vue配置axois多环境跨域访问

最新推荐文章于 2024-09-04 19:52:49 发布

原创最新推荐文章于 2024-09-04 19:52:49 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

vue小白炼成记同时被 2 个专栏收录

28 篇文章

订阅专栏

18 篇文章

订阅专栏

本文介绍如何在Vue项目中根据不同的开发环境（开发、演示、正式）配置Axios的服务器路径，并实现跨域访问。首先，安装Axios；然后，在main.js和vue.config.js中设置配置；接着，在src-common/config文件夹下创建各环境的配置文件（如demo.js、product.js、test.js），并在index.js中作为入口；最后，在http.js中引入配置并应用到Axios，以及在main.js中启用http.js使配置生效。详细讲解了Axios跨域请求的实现方法。

需求：项目的开发环境、演示环境和正式环境在不同的服务器，因此需根据需要自动配置axois的服务器路径，同时也要配置跨域访问

1、项目中安装axois

npm install axios --save

2、配置axois

在main.js文件中添加

import axios from 'axios' //引入axios
Vue.prototype.axios = axios;

在vue.config.js中配置多服务器

在vue.config.js中配置多服务器跨域

 devServer: {
        port: 8888, // 端口号
        proxy: {
            '/apis': {
                target: 'http://192.168.50.111:8088/', // target host
                ws: true, // proxy websockets 
                changeOrigin: true, // needed for virtual hosted sites
                pathRewrite: {
                    '^/apis': '' // rewrite path
                }
            },
            '/api2s': {
                target: 'http://192.168.50.107:8088/', // target host
                ws: true, // proxy websockets 
                changeOrigin: true, // needed for virtual hosted sites
                pathRewrite: {
                    '^/api2s': '' // rewrite path
                }
            },
            '/api3s': {
                target: 'http://192.168.50.106:8088/', // target host
                ws: true, // proxy websockets 
                changeOrigin: true, // needed for virtual hosted sites
                pathRewrite: {
                    '^/api3s': '' // rewrite path
                }
            }}
}}

在src-common下新建config文件夹，文件夹下新建开发、演示和测试环境下具体的配置文件，填写具体环境的配置，将其与配置文件中的地址关联

demo.js 演示环境

module.exports = {
    // 演示服务器
    api: {
        host: '192.168.50.107',
        port: '8888',
        protocol: 'http',
        url: "api3s"
    }
}

product.js 正式环境

module.exports = {
    //正式服务器
    api: {
        host: '192.168.50.106',
        port: 8088,
        protocol: 'http',
        url: "api3s"
    }
}

test.js 开发测试环境

module.exports = {
    // 开发测试服务器
    api: {
        host: '192.168.50.111',
        port: 8088,
        protocol: 'http',
        url: "apis"
    }
}

index.js将服务器配置文件作为不同环境的入口文件

/**
 * 项目配置不同的环境服务器地址的入口文件
 */

let apiServer = {};

switch (process.env.NODE_ENV) {


    case 'production':
        apiServer = require('./product.js')
        break;
    case 'demo':
        apiServer = require('./demo.js')
        break;
    case 'development':
        apiServer = require('./test.js')
        break;
    case 'test':
        apiServer = require('./test.js')
        break;
}

export const API_SERVER = {
    default: apiServer.api.url //配置了跨域
        /* default: `${apiServer.api.protocol}://${apiServer.api.host}:${apiServer.api.port || ''}` */
}

在src目录下新建http.js，引入以上配置入口文件，将配置作用到axios上

import axios from 'axios'
import { API_SERVER } from './common/config'

//请求初始化配置
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';


axios.defaults.baseURL = API_SERVER.default;
console.log("axios.defaults.baseURL" + axios.defaults.baseURL);

在main.js文件中引入http.js文件，使配置最终生效

axios 跨域请求具体调用方式

     /**
     * 查询某一气象类别
     * @param {json}    data     选择的节点对应的值
     */
    sch_sk(data) {
        var  p={//参数
          typeCode:data.imgSk
        }
         var url = api.commonWea.getCmaImg;//请求url
         this.axios
        .get(url, {
          params: p
        })
        .then(function(rst) {
            if(rst){
               alert("ok");
            }
        })
        .catch(function(error) {
            alert("error");
        }); 
    }