前端规范文档

# 跨域

# 简介

跨域是 浏览器 为了安全，限制从脚本内发起的跨源HTTP请求，或者请求发送但是结果被浏览器拦截。常见 XMLHttpRequest 和 fetch都遵守跨域策略。

TIP

传统类似jsp之类的开发模式不存在跨域，因为页面渲染和数据请求都属于同源范围，前后端分离和跨域是完全不同的概念，前后端分离和跨不跨域没有任何关系。同源策略

# 预请求

对于复杂请求，浏览器会首先发起一个options请求，用于检查服务器是否允许跨域(实际)请求，options请求的使用，可以避免跨域请求对服务器数据产生未预期的影响。

# 跨域实现

# cors(跨域资源共享)

这是一种标准跨域共享机制，开发人员开启跨域都应该以该规范为准。

  1. 前端进行本地开发时候，可以通过 脚手架工具 自带代理服务器开启跨域进行调试，这样后端不用做任何处理即可跨域访问。

TIP

出现跨域推荐使用cors，不推荐前端开启跨域每次更新后端地址需要重启项目非常麻烦，无法享受热更新。

  1. 后端通过设置 返回头 来进行跨域
Access-Control-Allow-Origin: http://job.xrdev.cn //允许当前域名跨域
Access-Control-Request-Method: POST, GET
Access-Control-Allow-Headers: x-access-token
Access-Control-Max-Age: 60000 //多少毫秒以内可以不用再发起预请求，对性能提升非常大帮助
1
2
3
4

TIP

Access-Control-Allow-Origin: * 这种方式无法携带cookie，并且非常不安全。

最佳实践是 本地开发环境根据请求地址动态设置域，这样可以保证开发环境都允许跨域。生产环境则配置域名白名单，判断请求域是否在白名单内。

TIP

Access-Control-Request-Method: * 这种方式也不太推荐，同样是处于安全考虑，应该按照实际需求进行配置。

  1. 可以通过nginx配置实现跨域

TIP

不要nginx和后端代码层面同时设置跨域，这样会导致某一端设置跨域失效。

# 其他跨域方式

jsonp(不推荐)

← 不同数据类型处理 →