前端开发中解决浏览器的跨域问题：

一、什么是跨域？

答：当前发起请求的域和该请求指向的资源所在的域不一致。具体表现在协议、域名、端口号——均一致为同域，有一个不同就是跨域。

--------------------------------------------------------------------------------------------------------------------------------

二、为什么要跨域？

答：①在前端开发中，经常需要到调用第三方服务接口；

②现在的项目大多采用前后端分离的模式，前端后端的域名不一致，因此需要解决跨域问题。

--------------------------------------------------------------------------------------------------------------------------------

三、解决“跨域”的五种常见方式：

注意：常见的html标签中的“img”、“script”、“form”、“link”、“iframe”标签发起请求时不存在跨域问题的限制。

1. JSONP

——根据“script”标签发送请求时不存在跨域问题，在“script”标签中发送相关请求

原理：①客户端在script标签中发送相关请求，并同时传递一个函数func；

           ②服务器端接收请求后，将准备好的数据data以“func（”+data+")"的形式发送给客户端

           ③客户端接收到“func（”+data+")"相关处理后，即执行函数func(data)

注意：由于JSONP基于script标签，因而只能处理get请求、无法处理post请求。

---------------------------------------------------------------------------------------------------------------

2. CORS跨域资源共享

与JSONP对比更有优势，无请求方式的局限性(post、get均可)。

客户端：与正常非跨域请求相同；

服务端：设置相关的请求header头部信息(注意需要处理options试探性请求)

---------------------------------------------------------------------------------------------------------------

3. http proxy代理跨域(利用Webpack配置)：推荐使用。

 

优点：只需要在webpack.config.js文件中进行相关配置，无需其它编码，操作简单。

---------------------------------------------------------------------------------------------------------------

4. nginx反向代理

 客户端发送的请求不是直接到达目的服务器，而是到达部署在目的服务器端的代理服务器，通过代理服务器转发接口请求，通过一定的转发规则将接口请求转发到目的服务器。

原理：

① 发送请求访问8081.max.com，通过本地host文件域名解析，找到192.168.72.49服务器（安装nginx） 
② nginx反向代理接受客户端请求，找到server_name为8081.max.com的server节点，根据proxy_pass对应的http路径，将请求转发到端口号为8081的tomcat服务器。 

前端发送请求时跟非跨域时一致，只需要在服务器端安装、配置nginx相关。

server {
　listen 3000;
　server_name localhost;

    #将所有localhost:3000/为开头的请求转发
    location / {
　　proxy_pass http://localhost:3001;  //反向代理
　　index index.html index.htm;

      #下面这两条配置，意思是将http头转发给后端以拿到客户端IP地址

       proxy_set_header Host $host;

　　proxy_set_header X-Real-IP $remote_addr;

   }
}

另，为什么称作“反向代理”？

正向代理：代理服务器代理的是客户端。例如找一个代理服务器访问Google，客户端明确地指定要访问的目的服务器，而目的服务器并不知道客户端来源，在正向代理中客户端信息是被隐藏的。

反向代理：代理服务器代理的是目的服务器，代理服务器与目的服务器同属一个环境。发送请求的客户端是明确的，但请求具体由哪台服务器处理并不明确，且代理服务器对外透明，客户端并不知道自己访问的是代理服务器，在反向代理中服务端被隐藏。

---------------------------------------------------------------------------------------------------------------

5. postMessage——基于iframe标签

即window.postMessage() 方法，使用详情见：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

---------------------------------------------------------------------------------------------------------------

6. socket.io ——实时通信聊天

使用详情见：https://socket.io/get-started/chat