axios 及其跨域

相关术语

• 浏览器同源策略
  同源策略禁止跨站点发起ajax请求，这时需要CORS技术。
• CORS：跨域资源共享
  CORS是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
  浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request），简单请求浏览器不会预检，而非简单请求会预检。
  对于复杂请求，首先，CORS先向跨域站点发起OPTIONS请求，进行一种"试探"，要想浏览器继续发起请求，服务器必须对OPTIONS请求进行20X响应，否则ajax直接报错：

Access to XMLHttpRequest at 'http://后台服务器:8080/api/user/login' from origin 'http://前端服务器:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

此外，20X响应应该提供这三个Header字段：Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers。
浏览器根据这些字段考虑是否发送真正的ajax请求。

如果不考虑安全，完全可以这样设置服务器：

response.addHeader("Access-Control-Allow-Origin", "*")
response.addHeader("Access-Control-Allow-Methods", "*")
response.addHeader("Access-Control-Allow-Headers", "*")

204状态表示"无内容"，非常适合响应OPTIONS请求。

示例过滤器

class DefaultFilter : HttpFilter() {
    override fun doFilter(request: HttpServletRequest, response: HttpServletResponse, chain: FilterChain) {
        response.addHeader("Server", "MyCat")
        response.addHeader("Access-Control-Allow-Origin", "*")
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
        response.addHeader("Access-Control-Allow-Headers",
                "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With")
        arrayOf("OPTIONS", "options").forEach {
            if (request.method == it) {
                response.status = 204
                return
            }
        }
        chain.doFilter(request, response)
    }
}