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

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

问题:本地开发,调用后端的接口,一调用就报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

www.jianshu.com/p/16f57e053df7

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!