（十五）配置代理跨域

1.解决Ajax请求跨域的两种方式

        服务器之间传输数据不受同源策略的限制，Ajax是前端技术。

（1）解决跨域问题的两种方式 jsonp   cors

                jsonp：利用<script>的src属性引用外部资源不受同源策略(协议，主机号，端口号三者相同)的限制，但是只能解决get请求跨域的问题。

                前后端配合。（使用极少）

                cors:后端设置响应头（使用多）

2.配置代理

        （1）方式一：在vue.config.js文件中

module.exports = {
  devServer: {
    proxy: 'http://localhost:XXXX'
//XXXX为被请求的服务器端口号
  }
}

       缺陷：只能配置一个代理，而且如果本服务器已有资源就不能向另一服务器发起请求。

如示例中public中已存在students文件，如果在向服务器请求students就只能得到本服务器中的students。

        （2）方式二：开启多个代理服务器（项目中常用）

module.exports = {
  devServer: {
    proxy: {
//请求前缀，可自定义
      '/api': {
//url地址，被请求服务器的地址
        target: '<url>',
//是否支持websocket
        ws: true,
//用空代替请求前缀，防止发起请求时路径不匹配,相当于把请求路径中的请求前缀删了
        pathRewrite:{'^/api',''},
//是否‘说谎’，即是不是请求来自代理服务器，true:隐瞒，一般设置为true，默认为true；
//控制请求头中的host（端口号）值；如果为true，则和被请求服务器的端口号相同，反之则请求服务器的host（端口号）值相同
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

发起axios请求，在地址中端口号的后面加上请求前缀，如下所述：

        真实接口中没有前缀

//发起axios请求
axios.get('http://localhost:8080/请求前缀/students').then(reponse=>{},(error=>{}))
//不加请求前缀则请求本服务器中的资源

（3）实际案例：

请求前缀紧跟端口号