目录

一：什么是跨域?

二：跨域的处理方式

2.1 配置代理-01

2.2 配置代理-02

---

一：什么是跨域？

        跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。  所谓同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。

二：跨域的处理方式

        对于跨域的处理分为前端处理以及后端处理，而在现在的后端开发过程中，对于跨域的处理通过一个注解就可以轻松解决（@CrossOrigin），这里主要说的是前端对于跨域的处理-使用代理模式，而代理模式的使用又分为两种；将在下面分别罗列~

2.1 配置代理-01

在vue.config.js中添加如下配置：

 devServer: {
            proxy: 'http://localhost:9999'
          }

此种配置方法的优缺点及工作方式说明如下：

1、优点：配置简单，请求资源时直接发给前端（8080）即可

2、缺点：不能配置多个代理，不能灵活控制请求是否走代理

3、工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

2.2 配置代理-02

在vue.config.js中添加如下配置，编写vue.config.js配置具体代理规则：

devServer: {
            proxy: {
            '/api': {//匹配所有以“/api”开头的请求路径
                target: '<url>',//代理目标的基础路径
                pathRewrite：{’^/api‘:''}
                ws: true,
                changeOrigin: true 
            }
            }
 
//changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
//changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
//changeOrigin默认值为false，但我们一般将changeOrigin值设为true
 
//pathRewrite：{’^/api‘:''}//去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
 
//ws: true, //用于支持websocket

此种配置方法的优缺点及工作方式说明如下：

1、优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

2、缺点：配置略微繁琐，请求资源时必须加前缀。

在具体场景中的使用：

        点击“提交”按钮，发送axios请求，通过代理获取后台数据（token以及用户信息），进行本地存储，代码如下：

methods: {
    sumbtn() {
      this.axios({
        method: 'get',
        url: '/api/user/login',
        data: {
          username:this.name,
          password: this.pwd
        }
      }).then(function (response) {
        // 将返回的token存起来
        window.localStorage.setItem("token",response.data.msg)
        router.push('/home')
      })
    }
 
  },