设置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 的映射来进行项目测试（这个太过于麻烦）的问题。