什么是跨域&如何解决跨域

什么是跨域
(1): 跨域是"浏览器"对"ajax"做出的同源策略限制
(2): 同源指的是, 网页在浏览器打开时, 地址栏里的地址中协议, 域名, 端口和内嵌的ajax请求的url地址中协 议, 域名, 端口有一个对不上就跨域了
注意: 服务器和服务器之间的请求是没有跨域限制的

如何解决跨域问题?
方式1: jsonp
注意: jsonp和json没有关系, JSON是一种序列化数据的技术, JSONP是解决跨域的技术
使用: script标签的src属性, 来发送请求而且它不受跨域限制, 请求后让后台返回一个函数调用字符串+数据, 在前端进入到script标签之间, 当做js代码执行, 把数据带回来
特点: 需要前端传递一个方法名, 后端返回函数调用格式的字符串
要求: 前端和后端同时支持

方式2: cors
概念: 跨域资源共享, 现代浏览器前端默认支持的, 但是还需要后端开启才行
使用: cors是让后端进行设置
特点: 你可以在响应头里看看有没有一个叫"Access-Control-Allow-Origin"字段(是后台设置的, 作用: 允许哪些源进行跨域访问)
要求: 前端什么都不用做, 正常使用axios发送ajax请求, 只需要后端开启(前端无需感知)

方式3: 代理服务器
针对: 后端不开跨域支持, 我们前端自己用代理服务器也能拿到数据
原理: 前端代理服务器, 请求后端接口服务器, 因为服务器之间没有跨域限制
好在: vue脚手架有一个webpack开发服务器支持, 给这个服务器进行配置, 让他支持代理转发

1. 让axios请求, 不要直接请求外链地址(http开头的), 而是要请求/开头, 代表当前所在服务器(http://localhost:9528)
2. 配置代理转发的规则, vue.config.js中devServer的proxy选项内配置(让开发服务器支持代理转发)
   前提: 后端真的有"接口地址"可以使用, 才能用ajax请求 (前后端分离的项目)