开发环境解决跨域问题

跨域

为什么? 浏览器的同源策略(协议，域名，端口必须相等)

http://localhost:9528/ （前端页面） ---------------------》后端接口（https://heimahr.itheima.net/api） 后端没有开启CORS

在后端没有开启CORS 的情况下，因为浏览器的同源策略，是不能直接将后端返回的数据给前端，因为项目是前后端分离，前端一个服务 ，后端一个服务，后端不开启CORS，只能前端自己想办法

反向代理

webpack—vue-cli

http://localhost:9528/ （前端页面）—》http://localhost:9528/ （vue-cli代理 node）—》后端接口（https://heimahr.itheima.net）

前端不能直接请求后端服务，就搞个中间代理，中间服务刚好和我们的前端服务同源，所以前端和中间可以通信，而中间服务是node，

node后端向后端发送请求没有同源策略的限制，因为同源策略只针对浏览器，中间服务将前端的请求代理给了后端接口

怎么做？

跨域有开发环境和生成环境跨域，最后上线才解决生产环境，今天只考虑开发环境

vue.config.js

 devServer: {
    port: port,  //端口
    open: true,  //启动自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
    proxy:{
      '/api':{
        target:'https://heimahr.itheima.net'
      }
    }
    //before: require('./mock/mock-server.js')
  },