前端工程化开发时的跨域解决方案

此方案只能用于开发环境，线上最好设置同源策略

1. 场景

前后端分离的项目

前后端不在同一服务器的情况下，前端要访问后端API，可通过在vue.config.js中配置代理服务器

2. 配置

2.1 前提条件

1：安装vue-lic

2：安装axios 用于发送请求

2.2 配置axios

详细配置 请查看axios

2.3 开始发送请求

此时控制台会报跨域错误 ， 这个时候 就需要设置跨域了，或者后台配置允许跨域（一般都不这么干）

2.4 前端配置跨域

  1. 先在根目录创建vue.config.js
  2. 写入以下代码
1
  //vue-cli3.0 里面的 vue.config.js做配置
2
devServer: {
3
    proxy: {
4
        '/api': {     //这里最好有一个 /
5
            target: 'http://xx.xx.xx.xx:8080',  // 后台接口域名
6
            ws: true,        //如果要代理 websockets，配置这个参数
7
            secure: false,  // 如果是https接口，需要配置这个参数
8
            changeOrigin: true,  //是否跨域
9
            pathRewrite:{
10
                '^/api':''
11
            }
12
        }
13
    }
14
  }
  1. axios 中配置的 根路径（baseURL）需要设置你要代理的路径 ，此时，就会把这个路径代理到后台接口的域名下

注意：部分文章可能会在不就的将来更新

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！