Nginx映射本地静态资源时，浏览器提示跨域问题解决

超、凢脫俗 2023-10-11 16:41 15阅读 0赞

## 场景 ##

本地html中请求磁盘中的静态资源文件，可以使用Nginx做静态资源映射，

可以将本地磁盘文件映射为网络url。可是由于浏览器的跨域机制会提示：

from orihin 'null' has been blocked by CROS policy: Cross origin requersts are only

supported for....

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、编辑nginx.conf,添加如下代码

add_header Access-Control-Allow-Origin *;
    		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
    		if ($request_method = 'OPTIONS') {
    			return 204;
    		}

2、完整server代码

server {
    	    add_header Access-Control-Allow-Origin *;
    		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
    		if ($request_method = 'OPTIONS') {
    			return 204;
    		}
    
            listen       120;
            server_name  127.0.0.1;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   D:/WorkSpace/Gitee/three-js-study/assets/;
    			try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
    		
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7b57ae2ff6b241a08f180809deba3f69.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi