vue脚手架配置代理（解决跨域问题）

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

由于 API 接口服务器并没有开启 CORS 跨域资源共享，因此终端会提示如下的错误：

Access to XMLHttpRequest at ' https://www.escook.cn/api/users ' from origin ' http://l

ocalhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

header is present on the requested resource.

① 把 axios 的 请求根路径 设置为 vue 项目的运行地址 （接口请求不再跨域）

② vue 项目发现请求的接口不存在，把请求 转交给 proxy 代理

③ 代理把请求根路径 替换为 devServer.proxy 属性的值， 发起真正的数据请求

④ 代理把请求到的数据， 转发给 axios

方法一

在vue.config.js中添加如下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  /* 1.devServer.proxy 提供的代理功能，仅在开发调试阶段生效
  2.项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享 */
  devServer: {
    proxy: 'http://www.yang.top:3006'
  }
})

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。

2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

  methods: {
    // 封装请求图书列表数据
    async getBookList () {
      const { data: res } = await this.$http.get('/api/getbooks', { params: { id: 1 } })
      console.log(res)
    },
    /* 获取图书列表数据 */
    getInfo () {
      this.getBookList()
    },
    /* 获取用户列表的数据 */
    async getUser () {
      const { data: res } = await this.$http.get('/api/getname', { params: { id: 1 } })
      console.log(res)
    }
  }

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

2. 缺点：配置略微繁琐，请求资源时必须加前缀。

方法二发起请求：

		methods: {
			getStudents(){
				axios.get('http://localhost:8080/api1/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/api2/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},

① devServer.proxy 提供的代理功能，仅在开发调试阶段生效

② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享