跨域的解决方案

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

报错：Access-Control-Allow-Origin

https://jingyan.baidu.com/article/3a2f7c2ecb8fe726afd61126.html

二、什么是跨域

当一个请求url的协议、域名（IP）、端口三者之间任意一个与当前页面url不同即为跨域。

三、非同源限制

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
无法接触非同源网页的 DOM。
无法向非同源地址发送 AJAX 请求。

但是有三个标签是允许跨域加载资源：

四、跨域解决方法（常见的三种）

1，JSONP：

jsonp的原理就是利用

实现原理：

2，CORS：

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。

SpringBoot项目服务端配置跨域注解：

或

使用全局配置类：

原理设置响应头：

response.setHeader(“Access-Control-Allow-Origin”, “*”); //允许全部域名访问
response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS, DELETE”);
//设置支持的访问类型。
response.setHeader(“Access-Control-Allow-Headers”, “x-requested-with,Authorization”);// 跨域允许包含的头

3，http-proxy-middleware（http代理中间件）：

http-proxy-middleware是http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域问题。原理：（通过服务端代理请求，服务端请求服务端不存在跨域）

vue_cli项目中配置

pxyTable: {
‘/api’: {
target: ‘http://127.0.0.1:8088’,
changeOrigin:true,//开启代理，在本地会创建一个虚拟服务端，然后发送请求的数据，同时接受请求的数据
pathRewrite: {
‘^/api’: ‘’
}
}
}