跨域

当你的协议、域名、端口三者任一与当前url不一致的时候，就会出现跨域问题（浏览器的同源策略）

1.Jsonp

主要利用scrpt不用同源策略的影响，但是只支持get请求（目前非主流）

2.CORS（主要依赖于后端）

分为简单请求和非简单请求

简单请求

1.请求方式为GET、POST、HEAD；

2.Content-Type为application/x-www-form-urlencoded、multipart/form-data、text/plain

3.HTTP的头信息不超出以下几种字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

后端会判断请求头的Origin(源）是否在Access-Control-Allow-Origin里，是否存在白名单；存在即通过；

 

非简单请求（常见的application/json请求为非简单请求）

1.预检请求

判断请求方法、请求头、域名是否在Access-Control-Allow-Origin里

通过才发送正常请求

2.正常请求 （后端判断逻辑跟简单请求一样）

 

3.Nginx（前端自己就可以解决）

 

注意：

同源策略主要限制的是 脚本读取另一个源的内容。

例如：fetch("https://api.xxx.com") 拿到响应内容时，如果没 CORS 头，会报错。

但它 不限制浏览器去发请求。

你 <img src="...">，<link href="...">，<script src="..."> 都能发请求。

只是页面上的 JS 不能随意访问这些响应里的数据。