LMLPHP后院

如何通过服务端HTTP头解决前端跨域问题技术

maybe yes 发表于 2016-09-11 09:15

首先,HTTP 跨域问题的产生,并不是服务端的行为。是 Web 的规定,并且各大浏览器厂商都遵守了这个规则。

其次,要完全通过服务端解决跨域问题是做不到的,至少不是所有浏览器都有效,IE 系列内核的浏览器就不支持。所以,HTTP 跨域要完美的解决是很难的。

为什么我写这篇文章,其实这种问题,一般人不太关注,或者也尽量避免这个问题。原因是现在开发的前后端分离导致很多前端开发完全脱离了后端,而又懒得搭建环境,导致很多请求需要跨域,所以临时性后端支持

目前测试发现,webkit 内核浏览器,比如 chrome 是没有问题的。这也证实了为什么是跨域,浏览器还是会屁颠屁颠的去请求服务端,因为它还是要询问服务端的意思,如果服务端没有返回允许的头信息,浏览器就不处理这个内容,在审查元素里面看到 response 是空的。而 IE 系列的浏览器也许就直接不发出请求了。

下面描述具体做法,可以通过 nginx 的 add_header 来做,同样也可以通过后端程序来做。通过后端程序做比服务器配置肯定要灵活的多,并且更好维护。

nginx 的配置方法,在 http 里面增加 add_header,如下示例:

http{
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  # ...
}

后端 PHP 处理方法示例:

if ($env != 'online') {
    $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
    header("Access-Control-Allow-Origin: ".($origin?$origin:'*'));
    header("Access-Control-Allow-Headers: X-Requested-With");
    header("Access-Control-Allow-Methods: GET,POST,OPTIONS");
}

上面的判断是防止浏览器不支持通配符 * 的情况下,通过 HTTP_ORIGIN 来返回。

2024-03-29 08:53:08 1711673588 0.013533