什么是跨域，以及如何解决跨域问题？

跨域是相对于同源策略而言的。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域

同源策略带来的影响

在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据

但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的

这时如果再通过Ajax请求数据就会拿不到跨域数据

跨域解决方案

JSONP实现跨域访问的原理

1. 在同一界面中可以定义多个script标签

2. 同一个界面中多个script标签中的数据可以相互访问

3. 可以通过script的src属性导入其它资源, 通过src属性导入其它资源的本质就是将资源拷贝到script标签中

4. script的src属性不仅能导入本地资源, 还能导入远程资源

5. 由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

6. 服务端返回的数据是函数调用的形式，要传递的数据作为函数参数

7. 客户端用同名函数来接受数据

CORS跨域

cors协议流程

对于简单请求，浏览器会直接发送CORS请求，就是在header中加入Origin请求头字段。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的 HTTP 回应。浏览器发现，这个响应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误。

如果Origin指定的域名在许可范围内，服务器返回的响应会多出Access-Control-Allow-Origin字段，浏览器就会正常的处理响应数据。

对于非简单请求，浏览器会自动先发送一个options（预检）请求。一旦服务器通过了“预检”请求，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器返回的响应也会多出Access-Control-Allow-Origin字段，浏览器就会正常的处理响应数据。

//响应头 Response Headers
header('Content-Type: text/html;charset=utf-8');
header('Access-Control-Allow-Origin:http://localhost:8080'); // *代表允许任何网址请求
header('Access-Control-Allow-Methods:POST,GET'); // 允许请求的类型
header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies
header('Access-Control-Allow-Headers: Content-Type,Origin,Refer'); // 允许自定义请求头的字段 

简单请求与非简单请求

只要同时满足以下两大条件，就属于简单请求。

（1）请求方法是以下三种方法之一。

• HEAD

• GET

• POST

（2）HTTP 的头信息不超出以下几种字段。

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

一句话，简单请求就是简单的 HTTP 方法与简单的 HTTP 头信息的结合。

代理服务器

服务器之间传输http请求不受同源策略的限制。