zoukankan      html  css  js  c++  java
  • vue-cli 3.0之跨域请求代理配置及axios路径配置

    问题:在前后端分离的跨域请求中,报跨域问题

    配置:

    vue.config.js:

    module.exports = {
        devServer: {
            port: 20110, // 端口号,如果端口号被占用,会自动提升1
            host: "localhost", //主机名, 127.0.0.1,  真机 0.0.0.0
            https: true, //协议
            open: true, //启动服务时自动打开浏览器访问
            proxy: {
                '/hzhxapi': {
                    target: 'http://www.chengfeiting.com:20089',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/hzhxapi': ''
                    }
                },
                '/wixapi': {
                    target: 'https://www.iocpleasing.com',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/wixapi': ''
                    }
                }
            }
        },
    
        lintOnSave: false, // 关闭格式检查
        productionSourceMap: false, // 打包时不会生成 .map 文件,加快打包速度 
    }
    

     其中proxy设置了两个代理,一个代理hzhxapi,另外一个为/wixapi的代理,然后设置对应axios配置

    import axios from 'axios'
    
    const ts_url = '/hzhxapi';
    const iocp_url = '/wixapi';
    
    //axios.defaults.baseURL = iocp_url;
    axios.defaults.cache = false;
    
    const hx_request = axios.create({
        baseURL: ts_url,
        timeout: 100000
    });
    
    
    const wix_request = axios.create({
        baseURL: iocp_url,
        timeout: 100000
    })
    
    
    hx_request.cache = false;
    iocp_request.cache = false;
    wix_request.get('/_functions/ProjectList/991010')
        .then(res => {
            console.log(res.data)
        })
        .catch(err => {
            console.error(err);
        });
    
    hx_request.get('/static/1.json')
        .then(res => {
            console.log(res.data)
        })
        .catch(err => {
            console.error(err);
        });
    

      然后使用npm run serve,

    然后使用谷歌浏览器查看获取数据正确

  • 相关阅读:
    云图小助理
    ping包的checksum校验和
    ftp相关
    初始化字符串
    安全的域名解析
    10进制转62进制
    centos6一键安装WordPress
    CEF3编译
    一次性生产KEY
    linux系统问题排查
  • 原文地址:https://www.cnblogs.com/sttchengfei/p/12487410.html
Copyright © 2011-2022 走看看