剖析Nginx反向代理

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情\

PS：已经更文多少天，N就写几。一定要写对文案，否则文章不计入在内；模板句子需要带超链接。

为什么会出现跨域？

只要域名端口协议有一个不同, 就是跨域了~

当下, 最流行的就是**前后分离开发项目,也就是前端项目和后端接口**并不在一个域名之下，

那么前端项目开发时, 去访问后端接口就会存在**跨域**的行为.

问： Ajax可以实现跨域吗？不能如何解决跨域请求数据呢？解决方案：

1.jsonp 缺点:只能实现get请求比如上传FormData

原理: 动态的创建scrip添加src属性(但是这个请求是异步的)
在页面上声明了一个函数,服务器端返回的是函数调用

2.cors

原理:在响应头中添加 Access-Control-Allow-Orgin

3.反向代理

原理 :服务器与服务器之间的数据通信

请注意，我们所遇到的这种跨域是位于开发环境 (webpack代理服务器)，真正部署上线时的跨域是生产环境 (nginx服务器, 或者后台配cors)

解决开发环境的跨域问题

开发环境的跨域

开发环境的跨域，也就是在**vue-cli脚手架环境**下开发启动服务时，我们访问接口所遇到的跨域问题，

vue-cli为我们在本地**开启了一个服务,可以通过这个服务帮我们代理请求**,解决跨域问题

vue-cli的配置文件即**vue.config.js**,这里有我们需要的代理选项

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        '/api': {
          target: 'http://www.baidu.com', // 我们要代理请求的地址
           // 路径重写
          pathRewrite: {
              // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
              '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
          }
      },
    }
  }
}

以上就是我们在vue-cli项目中配置的代理设置

接下来,我们在代码中将要代理的后端地址变成后端接口地址

 // 代理跨域的配置
proxy: {
  // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
  '/api': {
    target: 'http://ihrm-java.itheima.net/', // 跨域请求的地址
  }
}

本节注意：我们并没有进行**pathRewrite, 因为后端接口就是ihrm-java.itheima.net/api**这种格式,所以不需要重写

**vue.config.js**的改动如果要生效,需要进行重启服务

同时，还需要注意的是，我们一定要注释掉(或删除) mock的加载，因为mock-server会导致代理服务的异常

// before: require('./mock/mock-server.js'),  // 注释mock-server加载

修改请求地址, 走代理

const loginUrl = 'http://localhost:8888/api/sys/login' // 走代理
this.$request.post(loginUrl, this.loginForm).then(res => {
  console.log(res)
})

最终效果图:

生产环境的跨域 (了解)

生产环境表示我们已经开发完成项目，将项目部署到了服务器上,这时已经没有了vue-cli脚手架的**辅助**了，

我们只是把打包好的**html+js+css**交付运维人员，放到服务器而已, 如果此时还是跨域,

一般可以借助**Nginx**进行代理, 请阅读这篇文章Nginx反向代理, 或者后台开启 cors