跨域问题【AJAX】

关于跨域的小谈

1. 为什么需要跨域
2. 跨域请求发出去没有？
3. CORS 中的两种请求

为什么需要跨域

跨域主要是用来防止 CSRF 攻击的。简单点说，CSRF 攻击是利用用户的登录态发起恶意请求。

也就是说，没有同源策略的情况下，A 网站可以被任意其他来源的 AJAX 访问到内容。如果你当前 A 网站还存在登录态，那么对方就可以通过 AJAX 获得你的任何信息。当然跨域并不能完全阻止 CSRF。

跨域请求发出去没有？

请求必然是发出去了，但是浏览器拦截了响应。你可能会疑问我通过表单的方式可以发起跨域请求，为什么 AJAX 就不会。因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，AJAX 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

CORS 中的两种请求

CORS 大家都应该知道是什么东西，但是对于 CORS 存在两种请求也许你就不知道了。

简单请求

以 AJAX 为例，当满足以下条件时，会触发简单请求

1. 使用下列方法之一：
   • GET
   • HEAD
   • POST
2. Content-Type 的值仅限于下列三者之一：
   • text/plain
   • multipart/form-data
   • application/x-www-form-urlencoded
3. 请求中的任 意XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

复杂请求

那么很显然，不符合以上条件的请求就肯定是复杂请求了。

对于复杂请求来说，首先会发起一个预检请求，该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

对于预检请求来说，如果你使用过 Node 来设置 CORS 的话，可能会遇到过这么一个坑。

以下以 express 框架举例：

app.use((req, res, next) =>

{res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Credentials")

next();

});

该请求会验证你的 Authorization 字段，没有的话就会报错。

当前端发起了复杂请求后，你会发现就算你代码是正确的，返回结果也永远是报错的。因为预检请求也会进入回调中，也会触发 next 方法，因为预检请求并不包含 Authorization字段，所以服务端会报错。

想解决这个问题很简单，只需要在回调中过滤 option 方法即可

res.statusCode =

204res.setHeader('Content-Length', '0')

res.end()