VUE #3 跨域代理配置

在 axios + vuex 配置好之后，后端似乎并没接收到前台请求 ？哦，那可能是没做跨域处理…

假设 VUE 是运行在 8080 端口，而后台服务是运行在 8081 端口，这时 VUE 直接发送请求到后台的话，后台是无法正常接收的该请求的，打开浏览器调试窗口会有报错：

Access to XMLHttpRequest at ‘http://localhost:8081/user/register’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

在 VUE 中可以通过配置 Vue CLI 来处理跨域请求，本篇主要记录以下两种方式跨域配置方式：

项目主要项目结构（本篇 VUE 版本 3.0 ！！！！）：

src
├── main.js
├── api
│   └── login.js # 后台请求
├── utils
│   └── request.js # 请求实例定义
├── views # 页面
│   └── Home.vue
└── store
│   ├── index.js      # 组装模块并导出 store 的地方
│   └── modules
│       └── user.js   # 用户模块
│
vue.config.js

VUE 3.0 项目创建时默认没有创建 vue.config.js 文件，如果没有的话，在根目录下手动创建。

方式一：直接在 vue.config.js 中指定代理路径

1、不需要在 axios 的实例中指定 baseUrl

如果在 baseUrl 中指定了完整的 URL，请求时是不会走 CLI 中配置的代理路径的，方式二同理，注意！！！！

下面是 request.js 代码：

import axios from 'axios'

//创建axios实例
const request = axios.create({
    // baseURL: '/api',
    timeout: 60000 //请求超时时间
})

export default request

2、vue.config.js 中配置代理

module.exports = {
	devServer: {
		//代理：指定后端服务路径
		proxy: 'http://localhost:8081/'
	}	
}

方式二：为指定请求配置专用代理

（推荐！！！）

1、在 axios 的实例中指定 baseUrl

import axios from 'axios'

//创建axios实例
const request = axios.create({
    baseURL: '/api',
    timeout: 60000 //请求超时时间
})

export default request

2、vue.config.js 中配置代理

module.exports = {
	proxy: {
         '/api': {
   			 //指定后端服务路径
             target: 'http://localhost:8081/',
             //后端路径中没有api,所以需要在代理中重写
             pathRewrite: {
                 '^/api': ''
             }
         },
         '/spi': {
             target: 'http://localhost:8085/',
             pathRewrite: {
                 '^/spi': ''
             }
         }
	}
}

解决好跨域问题后，前后端请求就打通了，后台可以处理数据了~~~~