場景

網絡接口返回json格式數據，可以直接在瀏覽器中訪問。

可以在頁面上右鍵另存為json格式文件

?

怎樣在本地使用nginx配置，模擬get接口返回該json文件，使前端使用ajax請求數據時，可以返回該json數據，

并且瀏覽器還不提示跨域。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、下載nginx

nginx: download

下載對應的版本并解壓，找到conf下的配置文件

2、修改配置文件

修改如下幾個地方

修改默認類型為json

http {include?????? mime.types;default_type? application/json;

配置別名訪問

??????? location /json/ {default_type application/json;alias D:/jsonData/;}

這個配置的意思是先設置響應的內容格式為application/json;

這里的alias配置方式是請求替代的方式，即/json/的請求就去對應D:/jsonData/目錄下去找。

配置跨域問題

??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;}

3、完整示例nginx配置

? #user? nobody; worker_processes? 1;#error_log? logs/error.log; #error_log? logs/error.log? notice; #error_log? logs/error.log? info;#pid??????? logs/nginx.pid;events {worker_connections? 1024; }http {include?????? mime.types;default_type? application/json;#log_format? main? '$remote_addr - $remote_user [$time_local] "$request" '#????????????????? '$status $body_bytes_sent "$http_referer" '#????????????????? '"$http_user_agent" "$http_x_forwarded_for"';#access_log? logs/access.log? main;sendfile??????? on;#tcp_nopush???? on;#keepalive_timeout? 0;keepalive_timeout? 65;#gzip? on;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?????? 3000;server_name? localhost;#charset koi8-r;#access_log? logs/host.access.log? main;location /json/ {default_type application/json;alias D:/jsonData/;}#error_page? 404????????????? /404.html;# redirect server error pages to the static page /50x.html#error_page?? 500 502 503 504? /50x.html;location = /50x.html {root?? html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#??? proxy_pass?? http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#??? root?????????? html;#??? fastcgi_pass?? 127.0.0.1:9000;#??? fastcgi_index? index.php;#??? fastcgi_param? SCRIPT_FILENAME? /scripts$fastcgi_script_name;#??? include??????? fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#??? deny? all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#??? listen?????? 8000;#??? listen?????? somename:8080;#??? server_name? somename? alias? another.alias;#??? location / {#??????? root?? html;#??????? index? index.html index.htm;#??? }#}# HTTPS server##server {#??? listen?????? 443 ssl;#??? server_name? localhost;#??? ssl_certificate????? cert.pem;#??? ssl_certificate_key? cert.key;#??? ssl_session_cache??? shared:SSL:1m;#??? ssl_session_timeout? 5m;#??? ssl_ciphers? HIGH:!aNULL:!MD5;#??? ssl_prefer_server_ciphers? on;#??? location / {#??????? root?? html;#??????? index? index.html index.htm;#??? }#}}?

4、啟動nginx，瀏覽器中訪問

http://localhost:3000/json/migration.json

5、前端jquery發起ajax請求示例

??????? $.ajax({url: 'http://localhost:3000/json/migration.json',type: "get",dataType: 'json',success: function (data) {}});

6、前端請求效果

總結

以上是生活随笔為你收集整理的Nginx映射本地json文件，配置解决浏览器跨域问题，提供前端get请求模拟数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。