文章目录
跨域问题一直是前端的一大难题，从前端出道到至今，无论是自己还是身边的同事，以及网上前端朋友都被这个问题困扰着。
尤其最近写了一个网络封装，用户提出最多的便是跨域问题，解释了很多次，都写在这里吧，以后自己忘了也可以看看，总结一下。
贴上标准的前端跨域报错(SpringBoot后台)：
说到跨域不得不谈的就是浏览器的同源策略，跨域也是因为浏览器这个机制引起的，这个机制的存在还是在于安全。
1. 什么是源
Web内容的源由用于访问它的URL 的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。
同源不同源一句话就可以判断：就是url中 scheme host port 都相同即为同源。
下面认识下url 结构中的这三个部分。
2. URL结构
URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。
URL有如下结构组成：
3. 同源不同源举🌰
举一下同源不同源的例子，便于
同源例子
不同源例子
4. 浏览器为什么需要同源策略
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
5. 常规前端请求跨域
在没有前后端分离的时候，跨域问题往往是很少的。因为前后端都部署到一起。现在前后端分离不管vue /react 面临跨域请求的问题。
下面是引用官网描述的一张图来解释跨域：
跨源域资源共享（CORS）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch）使用 CORS，以降低跨源 HTTP 请求所带来的风险。
jsonp
JSONP的原理非常简单，就是HTML标签中，很多带src属性的标签都可以跨域请求内容，比如我们熟悉的img图片标签。同理，script标签也可以，可以利用script标签来执行跨域的javascript代码。通过这些代码，我们就能实现前端跨域请求数据。
jsonp 可以在前端解决跨域问题，但是只是针对于get请求。实现方式可以引用一些npm 第三方库实现，jquery 也是带的。
可以在npm 搜下jsonp 库实现，非常简单。
webpack-dev-server
前端无论是vue项目还是react 项目大多数都会以webpack-dev-server 来运行，webpack-dev-server 可以设置代理，前端可以在开发环境设置代理解决跨域问题。
vue-cli、create-react-app、umi 等脚手架找到webpack devserver配置位置配上即可。
注意： 只限在开发环境，生产环境需要web 服务器同样原理代即可。下面会说明怎么用。
document.domain
利用 可以修改 访问页面的域，多用在父子关系的域，子域可以设置document.domain等于父域，从而解决同父域跨域问题。
举例子：
访问 跨域，可以利用 设置成
后端框架也很多，实现原理差不多，都是修改下相应头。以常用的Java SpringCloud 和nodejs koa 框架为例。
Http 协议CORS头
跨域其实也是http层面上可以解决的问题，后端解决也是比较简单的，也是项目常见的解决手法。
CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。
SpringCloud设置跨域
在跨域过滤器里配置一下跨域头部，* 是通配符即允许所有。
Koa设置跨域
koa 是插件机制，设置更简单，使用跨域插件即可。
运维解决我只会一点ngnix ，其他web 服务器就不说了，原理同webpack-dev-server 设置代理转发解决跨域问题。
步骤：
ngnix 配置代理解决跨域配置：
在工作中，大多数还是利用后端或者ngnix 代理来解决，前端可以在开发中临时配置解决问题。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/2040.html