阅读 470
Nginx实战四 (CORS跨域)

Nginx实战四 (CORS跨域)

nginx 除了可以设置反向代理解决跨域,还可以设置 CORS

构建跨域环境

打开本地 host 文件,配置一个新的域名,构建跨域环境。
增加一行 127.0.0.1 dazhihui.com

image.png 在 nginx 目录下新建一个文件夹,作为我们新域名指向的实际资源地址
路径:/usr/local/etc/nginx/html/dazhihui,新建一个 index.html文件,内容可自定义

image.png 在 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,看是否可以访问到

image.png 出现此界面表示我们第一步已经配置成功

配置cors解决跨域

我们把上一节本地的文件的请求地址改为新的地址dazhihui.com

image.png 刷新浏览器可以看到,由于 host 不同已经出现了跨域问题

image.png 修改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; charset=utf-8';
             add_header 'Content-Length' 0;

             return 204;                  # 200 也可以
        }

        root  /usr/local/etc/nginx/html/dazhihui;
        index index.html;
    }
}
复制代码

重启 nginx,刷新浏览器

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

文章分类
前端
文章标签