Nginx跨域配置导致接口返回HTML而非JSON数据的排查与解决
在使用Nginx进行跨域配置时，有时会遇到前端请求返回数据异常的情况。本文分析一个案例：Nginx跨域配置错误导致接口返回HTML而非预期JSON数据。
问题描述：
配置Nginx解决跨域后，前端请求接口返回HTML页面内容，而非预期的JSON数据（如图所示）。
立即学习“前端免费学习笔记（深入）”；
问题分析及解决方案：
根本原因是Nginx的location块配置错误。错误配置将/api/路径下的请求也指向了前端项目目录。因此，前端通过/api/请求后端接口时，Nginx返回的是前端项目文件，而非后端接口数据。
正确的Nginx配置应将前端资源和后端接口处理分开：前端资源使用location /块处理，后端接口使用独立的location /api/块进行反向代理。
正确的Nginx配置示例：
server { listen 80; server_name localhost; charset utf-8; location / { root /path/to/frontend; # 替换为您的前端项目路径 try_files $uri $uri/ /index.html; index index.html index.htm; } location /api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://backend-server-address; # 替换为您的后端接口地址 client_max_body_size 50m; }}
登录后复制
此配置中：/路径请求指向前端项目目录；/api/路径请求通过proxy_pass指令代理到后端接口地址；proxy_set_header指令传递必要的请求头信息到后端服务器。 这样就能正确处理前端资源和后端接口请求，避免返回错误数据。 请务必将/path/to/frontend和http://backend-server-address替换为您的实际路径和地址。
以上就是Nginx跨域配置后，接口返回HTML而非JSON数据，是什么原因导致的？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3038022.html
