访问服务器指定文件夹用域名,配置Nginx和Apache允许指定域名CORS跨域访问

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

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

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

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

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

//指定允许其他域名访问，只允许一个值，逗号分隔多个值是行不通的。

'Access-Control-Allow-Origin: *'//一般用法(*，指定域，可以把星号换成指定域名带http或https，*不允许携带认证头和cookies)

//是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回

'Access-Control-Allow-Credentials: true'

//预检结果缓存时间,也就是上面说到的缓存啦

'Access-Control-Max-Age: 1800'

//允许的请求类型

'Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS,PATCH'

//允许的请求头字段

'Access-Control-Allow-Headers: Origin, Accept, Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Access-Token'

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

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

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

server {

listen 80;

listen 443 ssl http2;

location / {

... ... ...

#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 允许指定域名跨域访问，根据自己情况修改

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

... ... ...

}

}

允许所有域名：add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

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

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

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

#

ServerName localhost.a

DocumentRoot "e:/projects/a/www/public"

DirectoryIndex index.html index.php

Options MultiViews

Options All

AllowOverride All

Require all granted

#上面的内容我们是不一样的

# 配置允许跨域的多个域名, 同时 定义变量 AccessControlAllowOrigin=域名

#SetEnvIf Origin "http(s)?://(\S*\.)?(tp5\.com|tp5\.net)(.*)$" AccessControlAllowOrigin=$0$1

SetEnvIf Origin "http(s)?://(qshtest.com|test.qqqqq.com)$" AccessControlAllowOrigin=$0

Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

Header set Access-Control-Allow-Credentials true

Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"