持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
什么是跨域
首先，浏览器中有很多中方式从服务器去加载资源。比如：
1、a标签的href属性可以从服务器去加载hmtl文件
2、img标签的src属性可以从服务器去加载图片文件
3、link的href属性可以从服务器去加载css文件
4、script的src属性可以从服务器去加载js文件
5、form表单可以和服务器进行交互，既能加载数据也可以提交数据
6、ajax技术可以更加灵活的和服务器进行交互，可加载数据也可以提交数据，且是异步的，不会让整个页面重新加载
7、fetch一个新的异步刷新的api采用promise风格的接口… 8、在浏览器地址栏输入url地址，也可以加载资源…
为什么产生跨域？
浏览器的同源策略导致的，同源策略：协议、域名、端口号都一致，只要有一项不同就会产生跨域
解决
Proxy（vue）
vue的处理方案：我们可以通过webpack为我们起一个本地服务器作为请求的代理对象，通过服务器与服务器进行请求数据，得到结果后，本地服务器将结果返回给前端
但是项目最终发布上线时，如果web应用和服务器不在一起仍会产生跨域
vue.config.js进行配置
devServer: {
port: port,
// 默认打开浏览器
open: true,
proxy: {
// 只要目标地址有api 就会进入
'/api': {
// 目标地址
target: 'xxx',
// 默认true, 允许本地代理服务器向目标地址发送请求
chandeOrigin: true,
// 重置路径: 可以任意将不同的接口指向同一个目标地址
pathRewrite: {
'^/api': '/api'
}
}
}
},
JSONP
原理是前端通过script标签穿一个函数给后端，后端接收函数后调用函数以参数的形式将数据返回给前端（技术有点老，先占个位，以后实现）
CORS（后端解决）
CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应
CORS实现起来非常方便，只需要增加一些 HTTP头，让服务器能声明允许的访问来源
只要后端实现了 CORS，就实现了跨域
