配置代理-解决跨域

• 为什么会产生跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

当一个请求的url的协议、域名、端口三者只要有一个与当前页面的url不同则会出现跨域问题

• 解决跨域的方法

  • JSONP：

  jsonp的原理就是利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。

  • CORS :全称cross origin resource share （资源共享）

  CORS的功能工作原理是：服务器 在返回响应报文的时候，在响应头中 设置一个允许的header

  //服务器设置CORS,允许浏览器跨域
  res.setHeader('Access-Control-Allow-Origin', '*')
  

  在人资中：直接请求服务器

    -   baseURL: process.env.VUE_APP_BASE_API
    -   VUE_APP_BASE_API = 完整服务器地址
  

  发请求

    -   request.post('/sys/login', data)
  

  实际请求会拼接基地址:

    -   完整服务器地址 + /sys/login
  

• 请求代理服务器（人资中）

  当我们请求访问某个页面或者接口的时候，被访问的服务器有特定的权限，不允许直接被访问，此时我们就需要借助代理服务器帮助我访问到相应数据

  (1) 配置vue.config.js

    proxy: {
            // 以 /api 开头的路径请求, 认为需要走代理
            // 需要这么发请求:   http://localhost:8888/api/sys/login
            // 代理后:          http://ihrm-java.itheima.net/api/sys/login
            // 将本机地址, 会替换成代理的地址, 进行请求
            '/api': {
              target: 'http://ihrm-java.itheima.net'
            }
          }
  

  希望代理能生效, 两个条件: 请求本机地址(可省略) + /api路径标识

  (2) 配置基地址 - baseURL: process.env.VUE_APP_BASE_API - VUE_APP_BASE_API = "/api"

  发请求正常发

  -   request.post('/sys/login', data)
  

  实际的请求会拼接上基地址

  -   /api/sys/login => 本机地址 + /api/sys/login => 走代理了
  

  走代理会将本机地址进行替换

  -   实际请求地址 => 代理地址 + /api/sys/login
  

  小tip: 如果实际请求地址, 不需要 /api 标识, 配置pathRewrite进行重写