前端-跨域梳理

一、修改请求头导致跨域

前端修改请求头之后，http request的头部增加字段后，不符合服务端配置的要求，服务端网关会对请求进行拦截，请求跨域。

什么是跨域？怎么解决？

1、什么是跨域？

跨域是一种常见的网络请求问题，它发生在尝试从不同的源（域名、协议或端口）访问资源时。由于浏览器的同源策略，这些请求可能会被阻止。但是，有多种方法可以解决跨域问题，使得资源可以被安全地访问。

同源策略（Same origin policy, SOP）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源策略是指"协议+域名+端口"三者相同。

2、怎么解决跨域？

JSONP

jsonp(JSON with Padding), 是JSON的一种"使用模式"，可以让网页跨域读取数据。其本质是利用script表情的开放策略，浏览器传递callBack参数到服务端，后端返回数据时，会将callBack参数作为函数名来包裹数据，从而浏览器就可以跨域请求数据并定制函数来自动处理返回数据。

ini 复制代码

<script srt="https://tal......home.html?callback=handleGetData">
</script>


或者


let script = document.creatElement('script');
script.type = 'text/javascript'
script.srt = "https://tal......home.html?callback=handleGetData"
document.head.appendChild(script)
function handleGetData(res){
  console.log(res);
}

优点：

jsonp兼容性比较强，使用于几乎所有浏览器，甚至是IE10及以下浏览器。

缺点：

没有对于错误的处理
只支持GET请求，不支持POST请求以及大数据量大请求，无法拿到相关的响应头，状态码等数据。
容易被恶意注入，造成xss漏洞
无法设置资源访问授权。

跨域资源共享（CORS）

跨域资源共享（Cross-origin resource sharing，CORS）是一个 W3C标准，允许浏览器向跨域服务器发送请求，从而克服了ajax只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有主流浏览器（IE10及以上）使用XMLHttpRequest对象都可支持该功能，IE8和IE9需要使用XDomainRequest对象进行兼容。

CORS整个通信过程都是浏览器自动完成，浏览器一旦发现ajax请求跨源，就会自动在头信息中增加Origin字段，用来说明本次请求来自哪个源（协议+域名+端口）。因此，实现CORS通信的关键是服务器，需要服务器配置Access-Control-Allow-Origin头信息。当CORS请求需要携带cookie时，需要服务端配置Access-Control-Allow-Credentials头信息，前端也需要设置withCredentials。

浏览器将CORS请求分成两类：简单请求和非简单请求。简单请求需要满足以下两大条件：

请求方法是以下三种方法之一：HEAD、GET、POST。

HTTP的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。