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

⼀、什么是跨域？

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

⼆、为什么要跨域？

答：①在前端开发中，经常需要到调⽤第三⽅服务接⼝；

②现在的项⽬⼤多采⽤前后端分离的模式，前端后端的域名不⼀致，因此需要解决跨域问题。--------------------------------------------------------------------------------------------------------------------------------

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

注意：常见的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() ⽅法，使⽤详情见：

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

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

使⽤详情见：