Nginx解决转发地址时跨域的问题
一、什么是跨域问题
在一个服务器A里放置了json文件，另一个服务器B想向A发送ajax请求，获取此文件，会发生错误。
Chrome提示：
XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
这就是跨域问题。解决方案有不少，比较好的是服务器端配置CORS，但要求服务器端做更改。如果在不需要更改服务器端的情况下解决呢？尤其是需要在本地测试的时候。
二、配置Nginx
打开nginx目录下的conf文件夹。打开nginx.conf，将其中的http请求修改为：
http {
include mime.types;
server {
listen 80;
server_name localhost;
charset UTF-8;
location / {
root html;
index index.html index.htm;
}
# Avoid CORS and reverse proxy settings
location /api/ { # [2]
proxy_http_version 1.1;
proxy_pass http://www.des.com/; # [3]
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;
}
}
}
注意粗体字的部分，/api/表示当请求api目录时，转向http://www.des.com/域名。
例如，请求：
http://127.0.0.1/api/ 就会转向 http://www.des.com/
http://127.0.0.1/api/aaa/bbb/ 就会转向 http://www.des.com/aaa/bbb/
这种由服务器转发的请求，可以突破跨域的限制，因此ajax也可以正常工作。
注意： /api/ 不行写成 /api。
http://www.des.com/ 也不能写成 http://www.des.com
三、配置hosts
为了在本机测试看起来更像在目标服务器上测试，可以设置系统的hosts文件。
每个系统（windows、Linux、Mac OS）都有hosts文件，它是本地的域名解析器。
通常，我们请求一个域名，如www.baidu.com，首先要向域名服务器请求百度的IP地址，然后再根据IP地址来访问。
也可以不需要咨询域名服务器，直接在本地的hosts键入百度的IP地址。
例如
252.192.0.15 www.baidu.com
这样，系统会先从hosts文件里搜索IP地址。
Windows下的hosts文件位于：C:\Windows\System32\drivers\etc
打开后，添加
127.0.0.1 www.des.com
则，每次访问www.des.com，就会链接到本地。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要介绍了使用Nginx做WebSockets代理教程,本文给出了代理配置,和一个完整的node.js实现的WebSockets实例,需要的朋友可以参考下2015-01-01
本篇文章主要介绍了详解nginx使用ssl模块配置HTTPS支持 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要给大家介绍了关于利用njs模块在nginx配置中引入js脚本的相关资料,通过这个脚本实现一些更复杂的 nginx 配置功能,需要的朋友可以参考下2021-12-12
今天接到一个配置nginx的需求是,需要访问某个域名时,nginx可以去掉前缀去代理访问到后端,这篇文章主要给大家介绍了关于nginx去掉前端配置的路径前缀的两种情况,需要的朋友可以参考下2024-05-05
Nginx配置server_name为域名后无法访问的问题解决
在Nginx的配置文件中增加服务器,其server_name设置为域名时,该网址不能正常访问,所以本文给大家介绍了Nginx配置server_name为域名后无法访问的问题解决,需要的朋友可以参考下2024-01-01
前端开发中Nginx是最常用的 Web 服务器和反向代理工具,主要用于部署静态资源、处理跨域、配置缓存策略等,这篇文章主要介绍了前端如何修改nginx配置的相关资料,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了Nginx开启stub_status模块配置方法,Nginx中的stub_status模块主要用于查看Nginx的一些状态信息,本文讲解它的开启配置方法,需要的朋友可以参考下2015-02-02
Nginx正向代理帮助客户端访问外部资源,常用于翻墙和隐藏IP；反向代理将外部请求转发至内网服务器,用于负载均衡、统一入口及安全隔离,两者核心区别在于代理对象（客户端vs服务端）和目的（访问外部vs服务优化）2025-07-07
这篇文章主要介绍了Nginx中HTTP的keepalive相关配置,以及Nginx的Httpd守护进程相关的keepalive timeout配置,需要的朋友可以参考下2016-01-01
本文主要介绍了Nginx代理Partainer的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
最新评论