美文网首页
vue开发阶段跨域处理

vue开发阶段跨域处理

作者: 苍老师的眼泪 | 来源:发表于2022-03-22 02:52 被阅读0次

    vue.config.js

    module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://benji.com:3000',
                    pathRewrite: {
                        '^/api': ''
                    },
                }
            }
        }
    }
    

    请求:

          axios.get('/api/hello').then(res => {
            console.log(res.data)
          })
    

    我们要请求http://benji.com:3000/hello的数据,而开发阶段的服务器允许在本机比如http://localhost:8080端口上,
    如果目标地址http://benji.com:3000/hello不允许跨域,则我们就要设置代理:
    以上devServer表示所有以/api开头的请求,代理到真正的服务器http://benji.com:3000
    如果像上面一样设置了pathRewrite则表示将请求中的url片段替换成目标片段。
    最终请求/api/hello变为/hello再变为http://benji.com:3000/hello
    在真正的执行过程中,浏览器依然是安装代码中的地址去请求本机开发的node服务器,
    node再根据配置去请求真实的接口地址http://localhost:8081/api/hello

    相关文章

      网友评论

          本文标题:vue开发阶段跨域处理

          本文链接:https://www.haomeiwen.com/subject/ybixjrtx.html