配置Nginx和Apache允许指定域名CORS跨域访问

前后端分离开发，导致前端项目需要跨域请求后端接口，解决方法有很多，本文只介绍两个：

1. 修改后端程序代码实现允许跨域请求

2. 修改服务器配置文件实现允许跨域请求

正文：

方法1：修改后端程序代码实现允许跨域请求 

以ThinkPHP为例，为了一劳永逸，直接在入口文件index.php中加入代码：

header("Access-Control-Allow-Origin: *");　　// 可以把星号换成指定域名带http或https
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS,PATCH');

方法2：修改服务器配置文件实现允许跨域请求

Nginx配置（实现了允许多个指定域名而不是允许所有域名）

在要允许跨域的站点配置的server段中添加代码

server
{
#begin 允许指定域名跨域访问，根据自己情况修改
#不要用tab代替空格
    set $cors_origin "";
    if ($http_origin ~* "^https://a.example.com$") {
        set $cors_origin $http_origin;
    }
#允许本地vue项目跨域访问
    if ($http_origin ~* "^http://localhost:8080$") {
        set $cors_origin $http_origin;
    }
    add_header Access-Control-Allow-Origin $cors_origin;
#end 允许指定域名跨域访问，根据自己情况修改
 
    listen 80;
    listen 443 ssl http2;
...
}

Apache配置（本地开发环境是WAMPServer，所以也要让本地的Apache也接受跨域请求）

在httpd.conf文件中解除LoadModule headers_module modules/mod_headers.so的注释

在站点配置块（可能是httpd-vhost.conf文件中）添加代码

#
<VirtualHost *:80>
    ServerName localhost.a
    DocumentRoot "e:/projects/a/www/public"
    <Directory  "e:/projects/a/www/public/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
#上面的内容我们是不一样的
#添加下面这行允许跨域访问
        Header set Access-Control-Allow-Origin *
    </Directory>
</VirtualHost>

注：我的nginx版本是1.16.0，apache版本是2.4.39，以上方法亲测有效。