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跨域的问题了;