究竟什么是跨域，如何解决跨域问题

在前后端分离的开发模式中，经常会遇到跨域问题，即 Ajax 请求发出去了，服务器也成功响应了，前端就是拿不到这个响应，这就是跨域问题。那跨域问题又是如何产生的，我们又该如何去解决跨域问题呢?

跨域指的是什么？

浏览器为了防止一些XSS、CSRF攻击，做了一层安全防护，这层防护就是同源策略。浏览器只支持同源的访问。所谓同源就是指“协议|域名|端口号”三者必须完全相同，即使是同一IP，不同域名也不行，二级域名也不行。

不受同源限制的：

• 页面中的连接，重定向以及表单提交不受同源策略限制

• 跨域资源引入是可以的，但js不能读写加载的内容。

  • <script src=""></script>
    

  • <img>
    

  • <link>
    

  • <iframe>
    

跨域就是受同源策略的影响，操作另一个源的资源

解决跨域问题

跨域请求的响应一般会被浏览器所拦截，注意，是被响应被浏览器拦截，请求已被服务端处理，响应也成功到达客户端了，但就是获取不到。

1 前端解决跨域

• 动态创建script

• document.domain + iframe (只有在主域相同的时候才能使用该方法)

• location.hash + iframe

• window.name + iframe

• postMessage（HTML5中的XMLHttpRequest Level 2中的API）

  配合使用 iframe，需要兼容 IE6、7、8、9

• CORS

  它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。

• JSONP

  Ajax 请求会受到同源策略限制，而 script 标签请求不会

• web sockets

  同源策略对web sockets不适用

2 后端解决跨域

• CORS

  CORS 其实是 W3C 的一个标准，全称是跨域资源共享。它需要浏览器和服务器的共同支持，具体来说，非 IE 和 IE10 以上支持CORS，服务器需要附加特定的响应头。

3 使用代理解决跨域问题

服务端与服务端的交互是不受同源策略限制的

使用代理去避开跨域请求，需要修改 nginx、apache 等的配置

Nginx Proxy

Nginx 是一种高性能的反向代理服务器，可以用来轻松解决跨域问题。

反向代理拿到客户端的请求，将请求转发给其他的服务器，主要的场景是维持服务器集群的负载均衡，换句话说，反向代理帮其它的服务器拿到请求，然后选择一个合适的服务器，将请求转交给它。

server {
  listen  80;
  server_name  client.com;
  location /api {
    proxy_pass server.com;
  }
}

Nginx 相当于起了一个跳板机，这个跳板机的域名也是client.com，让客户端首先访问 client.com/api，这当然没有跨域，然后 Nginx 服务器作为反向代理，将请求转发给server.com，当响应返回时又将响应给到客户端，这就完成整个跨域请求的过程。