设置nginx允许服务端跨域

目前项目大多使用前后端分离的模式进行开发，跨域请求当然就是必不可少了，很多时候我们会使用在客户端的ajax 请求中设置跨域请求，也有的在服务端设置跨域。但是有时候会遇到不使用ajax也没有使用后端服务的情况(如：openlayers 加载本地的arcgis 瓦片数据)，我们只需要进行一些静态资源的获取，于是我们把它交给了nginx 。

一、未配置跨域情况

看下面vue + openlayers 中读取本地瓦片的配置

     let layers_leshan = new TileLayer({
         source: new XYZ({
             crossOrigin: "anonymous",
             projection: 'EPSG:4326',
             url: '/image_map/_alllayers/',

             tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                 var x = 'C' + padLeft(tileCoord[1], 8, 16);
                 var y = 'R' + padLeft(tileCoord[2] -1, 8, 16);
                 var z = 'L' + padLeft(tileCoord[0], 2, 10);
                 var Newurl = '/image_map/_alllayers/' + z + '/' + y + '/' + x + '.png';
                 return Newurl;
             }
         }),
         zIndex: -3,
         visible: true
     });
     

这里如果使用ajax，层层回调根本获取不到数据，也许有大佬可以做到（只是我试了没成功）；当初我竟然将数据打包，然后放到nginx中来进行测试（哎），如下面是我的nginx 配置

• 这是配置的vue 项目build后的dist目录映射

	# 这个直接指向了我vue项目的dist目录，用于nginx 加载让其在同一个服务中来解决跨域问题	
	location /dist/{
		  root /YLKJPro/leshan_integrate_manage;
		}
		

• 离线瓦片的配置为

	 
		location /image_map/{
            root   html;
        }  	

其中瓦片目录如下

二、nginx配置了跨域

最后找到了在nginx中配置允许服务端跨域的方法，将nginx中配置改为

		location /image_map/{
			### configuration with allow cross domain ##
			add_header 'Access-Control-Allow-Origin' $http_origin  always;
			add_header 'Access-Control-Allow-Credentials' 'true'  always;
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'  always;
			add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'  always;
			add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'  always;
			if ($request_method = 'OPTIONS') {
				add_header 'Access-Control-Max-Age' 1728000  always;
				add_header 'Content-Type' 'text/plain; charset=utf-8'  always;
				add_header 'Content-Length' 0  always;
				return 204;
			}
            root   html;
        }  		

vue 中配置改为

     let layers_leshan = new TileLayer({
         source: new XYZ({
             crossOrigin: "anonymous",
             projection: 'EPSG:4326',
             url: 'http://localhost:808/image_map/_alllayers/',

             tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                 var x = 'C' + padLeft(tileCoord[1], 8, 16);
                 var y = 'R' + padLeft(tileCoord[2] -1, 8, 16);
                 var z = 'L' + padLeft(tileCoord[0], 2, 10);
                 var Newurl = 'http://localhost:808/image_map/_alllayers/' + z + '/' + y + '/' + x + '.png';
                 return Newurl;
             }
         }),
         zIndex: -3,
         visible: true
     });
     

这样就可以在vue项目中直接访问到离线瓦片了，解决了由于跨域而需要在每次运行项目测试时，先build ，然后通过nginx对dist 的映射来进行项目测试（这个太过于麻烦）的问题。