1.跨域的概念

1.“源”由协议、域名、端口号组成
2.同源策略是浏览器的一种保护机制。同源顾名思义，指两个源相同（即，两个源的协议、域名、端口号都相同）
3.违反了同源策略的请求就是通常说的跨域请求

2.跨域的解决方案-JSONP

JSONP方案和ajax没有任何关系，是通过script标签的src属性实现，因此JSONP方案只支持get请求，并且兼容性好，几乎所有浏览器都支持。
实现原理：在全局定义一个函数，将函数名以get传参的方式写入到script标签的src属性中(如下图所示)，后端返回函数名以及参数，全局定义的函数就会自动调用，形参会接收后端传过来的参数。

JSONP原理图示

3.跨域的解决方案-CORS

CORS（Cross-Origin Resource Sharing，跨域资源共享）方案，就是通过服务器设置一系列响应头来实现跨域。而客户端不需要做什么额外的事情。

4.跨域的解决方案-代理转发

代理转发的原理：在前端服务和后端接口服务之间架设一个中间代理服务，它的地址保持和前端服务一致，那么：

1. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题（只能解决开发环境下跨域的问题）。

实现方法：vue-cli为我们内置了该技术，我们只需要按照要求配置一下即可。
在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
      // 如果请求地址以/api打头,就出触发代理机制
      // http://localhost:8080/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
  }
}

5.nginx反向代理

反向代理和代理很像，都是在客户端与服务端中间架设一个中间代理服务器，不同点在于代理是代表客户端向服务端发送请求，反向代理是代表服务端接收客户端发送的请求。
实现方式是配置Nginx，修改nginx.conf配置文件，如下图所示：