|
nginx 除了可以设置反向代理解决跨域，还可以设置 CORS
构建跨域环境
打开本地 host 文件，配置一个新的域名，构建跨域环境。
增加一行 127.0.0.1 dazhihui.com
在 nginx 目录下新建一个文件夹，作为我们新域名指向的实际资源地址
路径：/usr/local/etc/nginx/html/dazhihui，新建一个 index.html文件，内容可自定义
在 conf.d 文件加下新建一个文件 cors.conf，写入以下配置
server {
# 监听80端口号
listen 80;
# 监听访问的域名
server_name dazhihui.com;
# 根据访问路径配置
location / {
root /usr/local/etc/nginx/html/dazhihui;
index index.html;
}
}
保存，重启nginx
我们请求下 dazhihui.com，看是否可以访问到
出现此界面表示我们第一步已经配置成功
配置cors解决跨域
我们把上一节本地的文件的请求地址改为新的地址dazhihui.com
刷新浏览器可以看到，由于 host 不同已经出现了跨域问题
修改cors.conf，写入以下配置
server {
# 监听80端口号
listen 80;
# 监听访问的域名
server_name dazhihui.com;
# 根据访问路径配置
location / {
add_header 'Access-Control-Allow-Origin' $http_origin; # 全局变量获得当前请求origin，带cookie的请求不支持*
add_header 'Access-Control-Allow-Credentials' 'true'; # 为 true 可带上 cookie
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允许请求方法
add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers; # 允许请求的 header，可以为 *
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000; # OPTIONS 请求的有效期，在有效期内不用发出另一条预检请求
add_header 'Content-Type' 'text/plain; ';
add_header 'Content-Length' 0;
return 204; # 200 也可以
}
root /usr/local/etc/nginx/html/dazhihui;
index index.html;
}
}
重启 nginx，刷新浏览器
可以看到跨域问题消失了，并且内容已经正常返回
|