本地运行jqgrid的demo

我们公司的项目是使用jqGrid开发的，提起jqGrid，心里就一阵颤栗。害怕啊，这东西太复杂了。

为啥复杂呢，想来想去大概有2点原因。

东西封装的有点“过分”了，几乎所有的操作都是通过jqGrid(参数)，传参来实现的。封装的过分厉害，就让很多东西变得有点莫名其妙
这个东西的使用文档，实在是写的太不清晰了。看这文档，完全不知道这是要干嘛的。

于是乎，我决定下载个demo，结果发现还运行不了。废了一番周折之后，终于本地跑通了。记录过程如下：

1.下载demo并解压

直接下载的案例是无法直接运行的，会暴跨域问题。

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.send @ jquery-1.7.1.js:8102*

于是后来我就想把json数据放到easy-mock或者放到云服务器。结果easy-mock实在是太慢，请求从来没成功过。而放到腾讯云服务器之后同样出现跨域问题。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

最后发现，jqGrid的demo必须放在nginx上。

2.方法1-Get方法请求数据

这个方法最简单，配置nginx如下：

其中root是我下载的jqGrid的demo路径，我把demo的名字改成了jqGrid-test

jqGrid-test目录结构如下:

.
|-jqGrid-test
  |-data
  |  |-JSONData.json
  |-index.html
  |-jqgrid
  |  |-css
  |  |-js
  |-js
  |  |-index.js
  |  |-jquery-1.7.1.js

修改nginx配置如下：

server {
    listen       10000;
    server_name  localhost;
    charset utf-8;
    location / {
        root   D:\xyy\jqGrid-test;
        index  index.html index.htm;

    }
}

修改jqGrid的mtype，把请求方法由"POST"改为"GET"

ok现在可以访问了。

3.方法2-Post方法请求数据

我们另外复制一份下载的demo，修改名字为jqGrid-demo。

目录结果如下：

.
|-jqGrid-demo
  |-data
  |  |-JSONData.json
  |-index.html
  |-jqgrid
  |  |-css
  |  |-js
  |-js
  |  |-index.js
  |  |-jquery-1.7.1.js

配置nginx如下：

server {
    listen       10001;
    server_name  localhost;
    charset utf-8;
    location / {
    	root   D:\fe2\jqGrid-demo;
    	index  index.html index.htm;
	}
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
	root   html;
	}
}

运行发现报405错误

Failed to load resource: the server responded with a status of 405 (Not Allowed)

出现405的原因是，Apache、IIS、Nginx等绝大多数web服务器，都不允许静态文件响应POST请求

百度了很久，网上有很多解决办法，但是大多都不可以。最后找到方法，修改nginx配置，如下：

server {
    listen       10001;
    server_name  localhost;
    charset utf-8;
    location / {
        root   D:\fe2\jqGrid-demo;
        index  index.html index.htm;

    }
    error_page 405 =200 @405;  
    # nginx使用post访问本地文件
    location @405 {  
        root D:\xyy\jqGrid-test; 
        proxy_method GET;  
        proxy_pass http://localhost:10001;  
    }
    location = /50x.html {
        root   html;
    }
}

ok，现在本地可以访问jqGrid的demo了。