美文网首页vue随机收藏
vue.config.js的proxy为什么不起作用

vue.config.js的proxy为什么不起作用

作者: 小呆糊总 | 来源:发表于2022-06-16 11:20 被阅读0次

    问题:本地开发,调用后端的接口,一调用就报CORS error跨域

    第一种写法:后端网关没有做跨域处理,但是这种方法如果用到多个服务时,会导致需要配置多个代理
    image.png

    env文件

    VUE_APP_WEB_API=http://192.168.200.176:5080/verify
    

    vue.config.js文件

      devServer: {
        proxy: { // 配置本地代理
          '/api': {
            target: 'http://192.168.200.176:5080/verify',
            secure: false,
            changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
            // ws: true, // 是否启用websockets
            /*
            pathRewrite意味着当我们请求本地http://localhost:8080/api/uploadAndValid
            地址时,实际访问的是
            http://192.168.200.176:5080/verify/uploadAndValid
            注意:必须把env文件的VUE_APP_WEB_API=http://localhost:8080/api改为本地的
            */
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      },
    

    上传页面-调用接口http://192.168.200.176:5080/verify/uploadAndValid

    <template>
      <div class="signFileUploadCotain">
        <Upload
          ref="upload"
          type="drag"
          :action="`${baseUrl}/uploadAndValid`">
            <p style="font-weight:bold;">点击上传或拖拽文件到这里</p>
        </Upload>
      </div>
    </template>
    
    <script>
    //baseUrl  = http://192.168.200.176:5080/verify
    const baseUrl = process.env.VUE_APP_WEB_API
    </script>
    

    但是请求的url并没有任何变化,说明proxy的配置并没有起任何作用


    image.png

    原因:
    proxy的配置pathRewrite是针对本地的服务,所以env的配置文件要是http://localhost:8080/api,这样所有的请求接口都带有/api,并在遇到/api时自动代理到proxy设置的target,
    修改后
    env

    VUE_APP_WEB_API=http://localhost:8080/api
    

    vue.config.js

      devServer: {
        proxy: { // 配置本地代理
          '/api': {
            target: 'http://192.168.200.176:5080/verify',
            secure: false,
            changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
            // ws: true, // 是否启用websockets
            /*
            pathRewrite意味着当我们请求本地http://localhost:8080/api/uploadAndValid地址时,
            实际访问的是http://192.168.200.176:5080/verify/uploadAndValid
            注意:必须把env文件的VUE_APP_WEB_API=http://localhost:8080/api改为本地的
            */
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      },
    

    修改后接口请求成功,不再跨域

    注意:访问http://localhost:8080/api/uploadAndValid实际是访问http://192.168.200.176:5080/verify/uploadAndValid
    注意:env文件和vue.config.js修改时,需要重启服务修改才能起作用
    image.png
    方法二:后端网关做了跨域处理

    2-1env的服务地址不做配置,这样系统会自动识别本地的服务,部署到线上时,也会自动获取

    VUE_APP_WEB_API=
    

    2-2vue.config.js文件

        proxy: { // 配置本地代理
          '/aio': {
            target: 'http://192.168.200.176:5080',
            secure: false,
            changeOrigin: true // 开启代理,在本地创建一个虚拟服务端
            /*
            pathRewrite意味着当我们请求本地http://localhost:8081/aio/verify/uploadAndValid地址时,
            实际访问的是http://192.168.200.176:5080/aio/verify/uploadAndValid
            注意:必须把env文件的VUE_APP_WEB_API=  不赋值,这样部署后才会直接用线上地址,本地也会自动取
            本地地址
            */
            // pathRewrite: {
            //   '^/aio': '/aio'
            // }
          }
        }
    

    2-3.接口文件

    const baseUrl = process.env.VUE_APP_WEB_API
    export async function getTypeList (params) {
      return axios.request({
        url: `${baseUrl}/aio/verify/typeList`,
        method: 'post',
        data: params
      })
    }
    
    注意:如果将/aio/verify设置成某一个变量,再像${baseUrl}这样使用时,

    会导致代理无用,将会变成(failed)net::ERR_NAME_NOT_RESOLVED
    请求地址为:http://aio/verify/typeList

    const opapi = '/aio/verify'
    export async function getTypeList (params) {
      return axios.request({
        url: `${baseUrl}/${opapi}/typeList`,
        method: 'post',
        data: params
      })
    }
    
    image.png

    相关文章

      网友评论

        本文标题:vue.config.js的proxy为什么不起作用

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