vue-cli配置反向代理解决跨域及过程理解

最新推荐文章于 2025-10-12 13:23:24 发布

原创最新推荐文章于 2025-10-12 13:23:24 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue CLI项目中配置反向代理解决开发环境的跨域问题，并通过示例展示如何使用axios调用接口。同时介绍了如何根据不同环境配置请求地址。

vue-cli配置反向代理

vue-cli提供了配置反向代理的接口，即设置config/index.js中的proxyTable。配置如下:

dev: {
	......
	
	proxyTable: {
      '/api':{     //将www.exaple.com印射为/apis
        target:'https://www.exaple.com',     //跨域地址
        changeOrigin:true,       //是否跨域
        secure:false,        //是否使用https
        pathRewrite: {
          '^/api': '/api'       //匹配以/api为开头的请求地址，并使用/api替换
        }
      }
    }
}

在组件中调用接口示例(axios)：

import axios from 'axios'

axios({
	method:'post',
	url:'/api/login',
	data:{
		username:'qwe',
		password:123456
	}
}).then();

上述示例请求的地址会被解析为https://www.exaple.com/api/login。如果proxyTable中pathRewrite配置为空，则请求的地址被解析为https://www.exaple.com/login。

以上配置只是在开发环境（dev）中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.js和config/prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，生产环境下用正常的接口地址。配置代码如下：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',     //开发环境
  API_HOST:"/api/"
})

module.exports = {
  NODE_ENV: '"production"',      //生产环境
  API_HOST:'"http://40.00.100.100:3002/"'
}

对反向代理解决跨域过程的理解

请求示例

如图，浏览器中请求的url为http://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015
我实际请求的url为http://localhost:8080/portal/order/queryOrderRow?orderNumber=4015
本地项目通过http://localhost:8081/#/在浏览器中进行访问。

通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。