nginx除了可以设置反向代理解决跨域,还可以设置CORS
构建跨域环境打开本地host文件,配置一个新的域名,构建跨域环境。
增加一行127.0.0.1dazhihui.com
在nginx目录下新建一个文件夹,作为我们新域名指向的实际资源地址
路径:/usr/local/etc/nginx/html/dazhihui
,新建一个index.html
文件,内容可自定义
在conf.d
文件加下新建一个文件cors.conf
,写入以下配置
server{#监听80端口号listen80;#监听访问的域名server_namedazhihui.com;#根据访问路径配置location/{root/usr/local/etc/nginx/html/dazhihui;indexindex.html;}}
保存,重启nginx
我们请求下dazhihui.com
,看是否可以访问到
出现此界面表示我们第一步已经配置成功
配置cors解决跨域我们把上一节本地的文件的请求地址改为新的地址dazhihui.com
刷新浏览器可以看到,由于host不同已经出现了跨域问题
修改cors.conf
,写入以下配置
server{#监听80端口号listen80;#监听访问的域名server_namedazhihui.com;#根据访问路径配置location/{add_header'Access-Control-Allow-Origin'$http_origin;#全局变量获得当前请求origin,带cookie的请求不支持*add_header'Access-Control-Allow-Credentials''true';#为true可带上cookieadd_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;charset=utf-8';add_header'Content-Length'0;return204;#200也可以}root/usr/local/etc/nginx/html/dazhihui;indexindex.html;}}
重启nginx,刷新浏览器
可以看到跨域问题消失了,并且内容已经正常返回