分分钟搞定：跨域问题

Web开发中，跨域问题是一个很常见的问题。最近项目开发中涉及到H5相关页面，这些页面链接会被分享出去，这里就涉及到跨域问题了。趁着这个机会在好好总结一下这一块的知识。

什么是跨域？

首先一个url是由：协议、域名、端口三部分组成。（一般端口默认是80）如：https://a.test.com
当一个请求url协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

跨域产生的原因？

出于浏览器的同源策略限制。 同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

非同源会出现的限制

• 无法读取非同源网页的cookie、localstorage等
• 无法接触非同源网页的DOM和js对象
• 无法向非同源地址发送Ajax请求

解决跨域的常用方法

nginx反向代理解决跨域理解决跨域（前端常用）

正向代理：

a–>b访问不了，可以找个中间的服务器c, 先访问c再从c到b,类似曲线救国。 明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）

反向代理：

a–> c <–b a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)
浏览器可以访问a,而服务器之间不存在跨域问题，浏览器先访问a的服务器c，让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。

例如： nginx是静态服务器，跨域请求放在api下面好管理http://www.baidu.com:80/api/user 可以在nginx下面的config下面的nginx.conf里面配置 从80端口进来的就拦截一下，代理到81端口

server { 
  location /api {
     proxy_pass http://www.baidu.com:81; 
  } 
}

添加响应头解决跨域（后端常用）

String requestOrigin = request.getHeader(ORIGIN);
if (requestOrigin != null) {
    response.setHeader(ACCESS_CONTROL_ALLOW_ORIGIN, requestOrigin);
    response.setHeader(ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
    String contentTypes = request.getHeader(ACCESS_CONTROL_REQUEST_HEADERS);
    if (isNotEmpty(contentTypes)) {
      response.setHeader(ACCESS_CONTROL_ALLOW_HEADERS, contentTypes);
    }
}  

HTTP 响应首部字段

Access-Control-Allow-Origin
Access-Control-Expose-Headers
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Credentials
Access-Control-Max-Age

HTTP 请求首部字段

Origin
Access-Control-Request-Headers
Access-Control-Request-Method

之后会不定时分享一下实际工作中遇到的问题，有表述不准确的欢迎指出，分享知识，共同进步！！