Ajax 跨域请求 Access-Control-Allow-Origin 问题小记

前言

在前后端分离的项目中经常会遇到 Ajax 跨域的问题，然而网上大多数教程都是使用 * 通配符放行所有请求。然而这是不对的，没有解决根本问题。

正文

其实放行指定的域名很简单，下面我介绍下 PHP 和 Nginx 的。

PHP

$http_origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : ''; if (preg_match('/domain1.com|domain2.com$/i', $http_origin)) {     header('Access-Control-Allow-Origin: ' . $http_origin);  }

Nginx

location / {     if ($http_origin ~ 'domain1.com|domain2.com$') {         add_header Access-Control-Allow-Origin $http_origin;     } }

Access-Control-Allow-Origin

是不是很简单，直接在代码中使用正则进行匹配。只要你会正则，更严格的匹配模式自然就会了。

下面附上其他模式：

放行所有域名

PHP

header('Access-Control-Allow-Origin: *');

Nginx

add_header Access-Control-Allow-Origin *;

放行单个域名

PHP

header('Access-Control-Allow-Origin: http://domain1.com');

Nginx

add_header Access-Control-Allow-Origin http://domain1.com;

求知

看到这里肯定肯定有人会疑问，为什么放行多个域名不这样写：

header('Access-Control-Allow-Origin: http://domain1.com'); header('Access-Control-Allow-Origin: http://domain2.com');

add_header Access-Control-Allow-Origin http://domain1.com; add_header Access-Control-Allow-Origin http://domain2.com;

首先，PHP 这样写没问题，Nginx 这样写会提示:

XMLHttpRequest cannot load http://domain2.com. The 'Access-Control-Allow-Origin' header contains multiple values 'http://domain1.com, http://domain2.com', but only one is allowed. Origin 'http://domain2.com' is therefore not allowed access.

这就尴尬了是不是。

httphttpshttp://https://