当前位置:

Nginx四 CORS跨域

访客 2024-01-05 1155 0

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,刷新浏览器

可以看到跨域问题消失了,并且内容已经正常返回

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~