前端开发中经常会遇到调后端接口跨域的问题,解决方法有很多,这里不做介绍了,(有兴趣的可以去这里看看:https://juejin.cn/post/6844904126246027278#heading-44


今天主要说下Vue-Cli 中的代理,因为看到好多人按照官方文档配置,结果却不生效,为什么会这样呢,无外乎配置的不正确。
先看下官方的文档:

devServer.proxy

  • Type: string | Object

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

    module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }
    

    这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

    如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: '<url>',
            ws: true,
            changeOrigin: true
          },
          '/foo': {
            target: '<other_url>'
          }
        }
      }
    }

从文档中看,这种方式是给我们开发环境用的 ,其次是我们的请求要被开发服务器接收到,且不能匹配到请求,然后我们的请求就会被代理到配置的URL。


看懂了文档也就好找出我们配置不生效的原因,其实主要注意一下问题就行了(仅本地开发境适用,测试及生产时最好都部署在统一域名下,或者使用nginx代理)
1.配置好文件要重新启动服务,npm run dev
2.不是用对象形式代理的话比较简单,proxy: 'http://iqoo.want.com',就行了,前提是 .env.development 等环境文件中没有配置API默认路径,如果配置API的URL,就要注释掉,或者改为本地路径,否则代理不会生效,

NODE_ENV=development
VUE_APP_API_URL=development api url
VUE_APP_API_BASE_URL=http://iqoo.want.com/

需要改为
NODE_ENV=development
VUE_APP_API_URL=development api url
VUE_APP_API_BASE_URL=http://localhost:9090/  端口改为自己设定的端口


或者直接注释掉

NODE_ENV=development
VUE_APP_API_URL=development api url
##VUE_APP_API_BASE_URL=http://iqoo.want.com/

3.path: options 成对的对象时,环境注意事项同上,这里主要注意   ‘/api’ ,如果后端接口没有 /api 这个路径,那么你需要在本地默认路径上加上,同时在代理后注销

.env.development
--------------------
NODE_ENV=development
VUE_APP_API_URL=development api url

VUE_APP_API_BASE_URL=http://localhost:9090/api/
或
VUE_APP_API_BASE_URL=/api/


vue.config.js
----------------------
devServer: {
    port: 9090,
    open: true,
    https: false,
    proxy: {
      '/api': {
          target: 'http://iqoo.want.com',
          secure: false,
          pathRewrite: {'^/api' : ''}, //将/api转换成空字符
          changOrigin: true,
       }
    }
 }
   


 也可以将‘’/API‘’换成真是的路径,具体根据项目变换,如果是真是的根路径,就不需要替换成空了
 


VUE_APP_API_BASE_URL=http://localhost:9090/Service/
或
VUE_APP_API_BASE_URL=/Service/



devServer: {
    port: 9090,
    open: true,
    https: false,
    proxy: {
      '/Service': {
        target: 'http://iqoo.want.com',
        secure: false,
        changOrigin: true,
      }
    }
  }

环境和配置都没问题的话基本都会生效的(我没遇到的问题除外.......)

Logo

前往低代码交流专区

更多推荐