跨域

跨域-问题出现切换请求基地址到本地服务器

直接修改 env.development.js 中的配置即可  例：

修改开发环境变量的值

如果你本地没有服务器，可以把 localhost 改成 有本地服务器的人的IP地址，从而访问别人的服务器。

①启动mongodb服务

一般在安装后，它会常驻服务，我们不用管它

安装步骤可以查阅相关资料，如果运行失败就要去设置一下环境变量

搜索电脑中的环境变量，选择Path这一项 添加环境变量 （\MongoDB\Server\4.2\bin ）要把路径写对

②启动后端服务器  

在后端服务器文件夹，运行 npm run start

③测试服务器

在login页面上，点击登陆，查看后端的服务器的反应：后端能收到请求，但是前端网页上出现了跨域错误；

后续开发以本地接口为准，开发时要保证people下的服务器要启动；

注意：跨域错误本质问题出在浏览器，而不是服务器端，服务器是可以顺利收到请求的

---

跨域-原因及解决方案

出现条件

（请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的）

跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

解决方案

1.前端用JSONP方式去发请求（jsonp不是ajax请求）

2.后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

3.代理转发

代理转发原理

---

跨域-Vue-Cli配置代理转发

通过配置vue-cli请求代理解决开发环境下的跨域问题

构思图解

思路：

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

1.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

2.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

vue-cli解决跨域配置说明

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

实例代码

 基地址  .env.development

开发环境下的基地址环境变量只留'/api'

api接口

在封装接口时，url地址都可以将‘/api’省略

登录接口修改

重启项目，验证结果

修改了配置文件，重启前端项目，再次测试接口

---

 小结：

1.vue-cli集成了跨域代理功能------ 只能用在开发阶段。

2.vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

特别强调：

ajax的基地址baseUrl必须是相对地址，而不能是绝对地址