npm i axios 下载
import axios from 'axios' 引入
发送请求axios请求
跨域 违背了同源策略
同源策略规定了三个东西必须保持一致:协议名、主机名、端口号
http为协议名 localhast为主机名 8080为端口号、
1、解决跨域
1)、Cors(最标准的处理) 不需要前段人员做任何处理 只需要写服务器的人在服务器里面在返回响应的时候加几个特殊的响应头
2)、Jsonp 最巧妙的解决办法 借助了script标签里面的src属性 在引入外部资的时候不受同源策略限制这个特点办到的 在开发中很少用 因为需要前端+后端人员共同完成 而且也只能解决get请求的跨域问题
3)、代理服务器
代理服务器也是个服务器 它的端口号和我们自身保持一致 两台服务器之间的交流不首同源策略限制 即这样便可解决跨域问题 所以在发请求的时候端口号也是8080
如何开启一个代理服务器?
1)、nginx 需要掌握一定量的后端储备知识
2)、vue-cli 更加简单方便
使用方式一配置代理服务器有两个不完美的地方:
1、不能灵活的控制走不走代理服务器
public文件夹相当于8080服务器的根路径(8080这台服务器里面有什么就取决于public文件夹里有什么)当请求的资源8080自身有的时候 就不会将这个请求转发至5000服务器
2、不能够配置多个代理
只能将请求转发给5000服务器
使用方式二开启代理服务器
‘/api’ 请求前缀
3、 作用:当本地请求发送到代理服务器时 代理服务器会来判定 该请求的前缀是不是‘/api’,如果是 则发送请求(转发请求至5000),如果不是 则不发送请求 可以灵活的控制走不走代理服务器(‘/api’不是固定值,可自定义为‘/hah’ 等)
例如:如果请求前缀是‘/api’ 则发送请求至“http://localhost:5050”
前缀的携带位置:紧跟端口号
如果直接这么请求的话 会导致404错误 因为发送请求到5050服务器的时候携带的还是/api/students, 5050服务器有students但是没有/api/students
解决办法:
加上这个配置才能保证代理服务器发送到5050服务器请求时 只发送了/students 从而拿到数据
ws作用:用于支持websocket
changeOrigin:(用于控制请求头中host的值)
当changeOrigin:true时,代理服务器会表明自己也是5050服务器
当changeOrigin:false时,代理服务器表明自己是8080服务器
有时候5050服务器会有些限制 所以这个配置项最好设置为true。
ws和changeOrigin这两项如果不写的话 默认值也是true(在react中不写为false)