前端跨域请求和解决方案

1. 什么是跨域请求

• 前端开发中，常见的html标签：a,form,img,script,link,iframe以及ajax操作都可以指向一个资源地址或者说可以发起对一个资源的请求，这里的请求就存在同域请求还是跨域请求
• 跨域请求是指：当前发起请求的域与该请求指向的资源所在的域不一致（这里所有的域是协议，域名，和端口号的合集，同域就是协议、域名和端口号均相同，任何一个不同都是跨域）

2.  哪些是跨域请求

源URL	请求URL	是否跨域	说明
http://a.com/a	http://a.com/b	否	同协议同域名、同端口号，不同资源请求，不是跨域请求
http://a.com/a	http://a.coms:8080/b	是	端口不同
http://a.com/a	https://a.com/b	是	协议不同
http://www.a.com/a	http://x.a.com/b	是	主域名相同，但是子域名不相同
http://a.com/a	http://b.com/b	是	域名不同

3. 我们前端开发为什么会出现跨域请求

• 同源策略是浏览器的核心基础安全策略，我们开发时会避免跨域请求，同源策略是来防御一些非法的攻击，但是不能因为防御攻击就将所有的跨域进行拦截
• 开发中，会常常调用第三方的服务接口，很多专业的信息服务都是由不同提供商来做的，他们提供各种接口，这时候就无法避免的要使用跨域请求（这种接口服务多是采用cors来解决跨域的）
• 前后端分离的项目，前后端分属不同的服务，就会存在跨域问题，这时候会采用反向代理的方式来解决跨域

4. 跨域请求解决方案

• 修改浏览器的安全设置（有效但不可取）
• JSONP
• 跨域资源共享CORS（cross-origin resource sharing）
• iframe(问题较多也不可取)
• 反向代理

4.1 JSONP

• JSONP（JSON with Padding）
• JSONP原理：AJax存在跨域安全问题，但是script标签引用路径不存在问题，所有就会把ajax请求转变为script标签，直接获取资源，对资源数据处理再输出

4.2 跨域资源共享CORS (Cross-Origin Resource Sharing)

• CORS 是一个W3C标准，新增的一组HTTP首部字段允许服务器声明哪些来源请求有权限访问哪些资源，也就是运行浏览器向其声明了CORS的站点进行跨域请求
• 特点就是会在响应的HTTP首部增加 Access-Control-Allow-Origin 等信息，从而判断哪些资源站点可以进行跨域请求，还有几个相关的HTTP头部字段进行精细化控制
• CORS 与 JSONP 对比来说优势比较大，JSONP只支持GET方式，局限性较大，而且不符合处理业务的正常流程。采用CORS的话，前端编码与正常非跨域请求没有什么不同，在目前很多的模拟接口服务和一些公共服务上都会用

4.3 反向代理

• 不允许跨域请求，那么就不进行跨域。在请求到达服务前部署一个服务，将接口请求进行转发，这就是反向代理。通过一定的转发规则可以将请求转发到其他的服务

// nginx 
server{
    listen 9999
    server_name localhost
    location ^~/api{
        proxy_padd http://localhost:3000
    }
}

• 反向代理将我们前端后端项目统一通过反向代理来提供对外的服务，这样看上去就跟不存在跨域一样
• 反向代理的缺点就是，需要对Nginx等一些反向代理服务的配置。目前前后端分离的项目多采用这种方式

总结

• 一些公共服务类的多采用 CORS 
• 公司内部的前后端分离项目多采用 反向代理