跨域访问

在浏览器中,当一个网页的代码向不同源(协议、域名、端口)的服务器发送请求时,就会发生跨域请求。浏览器出于安全考虑,限制了跨域请求的执行,以防止恶意代码获取用户的敏感信息。

跨域问题本质上是浏览器限制,而不是服务端限制。可以查看Network,请求能够正确响应,response返回的值也是正确的,但浏览器不展示。

通常有如下措施可解决跨域访问,例如:

  • 客户端浏览器解除跨域限制(理论上可以但是不现实)

  • 发送JSONP请求替代XHR请求(并不能适用所有的请求方式,不推荐)

  • 修改服务器端的设置(推荐)

推荐第三种方式,在服务器端设置跨域参数,可前往 设置->跨域 设置,接下来我们逐一介绍参数。

允许源

Access-Control-Allow-Origin:指定允许访问的源(域名、协议、端口),使用通配符 * 表示允许所有源进行访问,也可以指定具体的源。

例如:Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: http://example.com

当浏览器发出跨站请求时,服务器会校验当前请求是不是来自被允许的站点。服务端根据浏览器请求首部字段 Origin 判断。

Origin组成:协议+域名+端口号

允许方法

Access-Control-Allow-Methods:指定允许的HTTP请求方法,多个方法使用逗号分隔。常见的方法包括GET、POST、PUT、DELETE等。

例如:Access-Control-Allow-Methods: GET, POST

允许头

Access-Control-Allow-Headers:指定允许的自定义请求头,多个头部字段使用逗号分隔。默认为 * ,表示不限制。

暴露头

Access-Control-Expose-Headers:指定响应中允许客户端访问的响应头,多个头部字段使用逗号分隔。

例如:Access-Control-Expose-Headers: Authorization

跨域时间

Access-Control-Max-Age:指定预检请求(OPTIONS请求)的有效期,单位为秒,默认 120 秒 。

在有效期内,浏览器无需再发送预检请求。例如:Access-Control-Max-Age: 3600

允许 Credentials

Access-Control-Allow-Credentials:指定是否允许发送Cookie等凭证信息。如果设置为true,则表示允许发送凭证信息;如果设置为false,则不允许发送凭证信息。

例如:Access-Control-Allow-Credentials: true

最后更新于