前端如何使用proxyTable和nginx解决跨域问题

标题1.跨域原因

浏览器的限制
跨域（协议/域名/端口的不同）
XMLHttpRequest请求

标题2.解决方案

浏览器禁止检查（适用于本地写demo调试）
后端代码设置请求参数，允许跨域
前端不发送XMLHttpRequest请求（如使用JSONP）
前端使用代理转发的形式
本篇主要介绍如何使用nginx和proxyTable代理的方式解决前端跨域问题

标题3.proxyTable

案例：假设我们现在本地的开发地址是http://localhost:8080，请求的地址是:http://localhost:8888/static/cnWord.json，我们在代码中写出请求如下：
axios.get('http://localhost:8888/static/cnWord.json').then((res)=>{
    console.log('success')
}).catch((res)=>{
    console.log('error')
})
因为端口号的不同，运行结果报了跨域的错误

如何使用proxyTable（基于vue-cli项目中自带的服务器配置），解决问题，方便开发环境的调试，文件位置：