什么是跨域问题？

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

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

跨域报错的原因

请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的

跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

二.什么是跨域?

当一个请求url的协议,域名,端口三者之间任意一个与当前的url不同都即为跨域

当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同）
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）

三、非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

四、跨域解决方法

1.cors的使用

由于XHR对象被W3C标准化之后，提出了很多XHR Level2(2008-2012年)的新构想，其中新增了很多新方法（onload、response…）和CORS跨域资源共享。 浏览器升级后开始支持CORS方案，从IE10开始支持。
CORS方案，就是通过服务器设置响应头来实现跨域 。

CORS才是解决跨域的真正解决方案。

前端需要做什么？
无需做任何事情，正常发送Ajax请求即可。

后端需要做什么？
需要加 响应头 。或者使用第三方模块 cors 。

**2…jsonp的使用 **

原理：
客户端利用 script 标签的 src 属性，去请求一个接口，因为src属性不受跨域影响。
服务端响应一个字符串
客户端接收到字符串，然后把它当做JS代码运行。

3.代理转发

1).代理服务和前端服务之间由于协议域名端口三者统一不存在跨域的问题,可以直接发送请求

2).代理服务和后端服务之间并不通过浏览器没有同源策略的限制,可以直接发送请求