Nginx配置多域名及跨域问题解决方案

1、配置多域名访问

①、配置nginx.conf文件

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

	# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

   	access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
	client_max_body_size 150m;
	client_header_buffer_size 512k;
	large_client_header_buffers 4 512k;


    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
	include /etc/nginx/conf.d/*.conf;			# 多域名配置文件都在该目录下存放
}

②、多域名配置：

文件结构目录：

A、vr.conf的文件配置：

B、mall.conf的文件配置：

参数说明：

server_name   	#绑定域名
index     		#默认文件
root  			#网站根目录

如上即可配置完成，重启nginx即可：

重启命令 systemctl restart nginx

2、跨域问题

需求情况：
①、当访问mall.test.com/vrapptest/index.html 时候需要访问vr.test.com/vrapp里面的服务相关接口；
②、当访问vr.test.com/vrapptest/index.html 时候也需要访问vr.test.com/vrapp里面的服务相关接口；
此时第一个就会出现跨域问题，第二个就可以正常访问（因为访问的是同域名下）；

①、为什么出现跨域：

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

②、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面URL	被请求页面URL	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

③、跨域的解决方案：

跨域需要解决两个问题：

1、OPTIONS 请求的正确响应
2、跨域请求正确响应

修改vr.conf文件：

因为我们需要访问vr.test.com域名下的接口，因此我们需要修改vr.conf文件；

配置如下：

	location ^~ /vrapp{
#    OPTIONS 请求的正确响应
		 if ($request_method = 'OPTIONS') {
		   add_header Access-Control-Allow-Origin *;
		   add_header Access-Control-Max-Age 1728000;
		   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		   add_header Access-Control-Allow-Headers  'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
		   add_header Content-Type' 'text/plain; charset=utf-8';
		   add_header Content-Length 0 ;
		   return 204;
		}
#   跨域请求正确响应
		if ($http_origin ~* (https?://(.+\.)?(test\.com$))) {
			add_header  Access-Control-Allow-Origin $http_origin;
			add_header  Access-Control-Allow-Credentials true;
			add_header  Access-Control-Allow-Methods GET,POST,OPTIONS;
			add_header  Access-Control-Expose-Headers Content-Length,Content-Range;
		}
		proxy_redirect off;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://127.0.0.1:8080;
	}

解释说明：

A、OPTIONS 请求的正确响应

if ($request_method = 'OPTIONS') {...} 当请求方法为 OPTIONS 时:
1、添加允许源 Access-Control-Allow-Origin 为 * (可根据业务需要更改)
2、添加缓存时长 Access-Control-Max-Age，当下次请求时，无需再发送 OPTIONS 请求
3、添加允许的方法，允许的首部
4、添加一个内容长度为0，类型为 text/plain; charset=utf-8 , 返回状态码为 204 的首部

B、跨域请求正确响应

if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {...}, 当 origin 为合法域名(可根据业务调整或去除合法域名验证)时:

1、添加允许源Access-Control-Allow-Origin为 $http_origin (可根据业务需要更改)
2、添加允许认证Access-Control-Allow-Credentials为 true ，允许接收客户端 Cookie(可根据业务需要更改。 但要注意，当设置为true时，Access-Control-Allow-Origin 不允许设置为 *)
3、添加允许的方法，暴露的首部

至此在通过mall.tets.com去访问vr.test.com/vrapp的相关服务接口，就不会出现CORS跨域的问题了；