跨域常见的解决方案

1.jsonp

 原理：动态生成script标签，通过src属性加载

 缺点：不支持POST

 应用场景：有些第三方接口数据可能会使用jsonp解决跨域问题（不常用）

2.CORS跨域资源共享，服务器配置，添加一个响应头（工作中常用）

3.vue 反向代理

axios.get('api/login')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })

 
// 解决跨域
module.exports = {
    devServer: {
        //设置代理
        proxy: {
            '/api': {
                target: 'http://localhost:3000', //域名（服务器地址）
                changOrigin: true, //是否跨域
                //重定向:对axios方法中的url进行重定向
                pathRewrite: { 
                    '^/api': '', //  实际请求网址为http://localhost:3000/api/login
                    //'^/api': '/api', //  实际请求网址为http://localhost:3000/api/api/login
                }
            }
        }
    }
}

      控制台network的请求网址的ip与当前网页ip一致，先请求代理服务器，再由代理服务器请求服务器

【补充】：正向代理和反向代理区别：

           （1）正向代理

              （2）反向代理