如果解决vue项目开发阶段和上线阶段的跨域问题

开发阶段的跨域

使用反向代理

前提:了解跨域问题的根本原因

• 客户端请求数据的地址和服务器的地址不一样,受浏览器的同源策略影响(满足条件: 协议-域名-端口一致),无法得到服务器响应的数据,被浏览器的拦截
• 解决方案,使用反向代理
• 流程图
  
  在vue.config.js中配置以下内容:
  如果请求地址中带有/api,则触发代理,像本地服务器发送请求,让本地服务器像后端服务器获取数据.服务器和服务器之间不会产生跨域问题
  

生产阶段的跨域

• 安装跨域代理中间件
• 依赖一个包 npm install koa2-proxy-middleware
• 流程图
  
  在public目录下创建一个app.js,将这段代码配置带app.js中就可以了

const proxy = require('koa2-proxy-middleware')
const app = new Koa();

app.use(proxy({
  targets: {
  // 这里的地址自行配置
    '/api/(.*)': {
        target: 'http://ihrm-java.itheima.net', //后端服务器地址
        changeOrigin: true
    }
  }
}))