(三)ajax请求不同源之nginx反向代理跨域

最新推荐文章于 2025-03-09 13:42:23 发布

weixin_30404405

最新推荐文章于 2025-03-09 13:42:23 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

文章标签：运维

原文链接：http://www.cnblogs.com/camille666/p/cross_domain_nginx_reverse_proxy.html

本文介绍如何使用Nginx作为反向代理服务器解决跨域问题，通过修改请求URL和Nginx配置文件实现跨域请求，适用于所有浏览器且支持session。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基本原理

nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。

用nginx反向代理实现跨域，是最简单的跨域方式，而且支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能，只需要修改nginx的配置即可。
在nginx服务器上配置多个前缀来转发http/https请求到多个真实的服务器，nginx服务器上所有url都是相同的域名、协议和端口，没有跨域限制。

nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自用户浏览器的。

二、测试步骤

1、安装nginx

2、修改请求的URL

如果页面www.xxx.com/html/userInfo.html请求www.yyy.com/api/getUserInfo?name=camille&age=18，通常会这么写

$.ajax({
  url:'www.yyy.com/api/getUserInfo?name=camille&age=18',  
  type:'GET',
  success:function (data){

  }
})

明显会存在跨域现象，此时应该修改请求的URL。

var proxyurl ='api/getUserInfo?name=camille&age=18';
//假如实际地址是www.zzz.com/proxy/html/api/getUserInfo?name=camille&age=18; www.zzz.com是nginx主机地址
$.ajax({
  url:proxyurl,  
  type:'GET',
  success:function (data){

  }
})

3、修改nginx的配置文件

server{
  listen 8080;
  server_name localhost;
  location / { #nginx用来路由的入口
    root html;
    index index.html index.htm
  }
  location ^~/proxy/html/{
    rewrite ^/proxy/html/(.*)$ /$1 break;
    proxy_pass http://www.yyy.com/;
  }
}

转载于:https://www.cnblogs.com/camille666/p/cross_domain_nginx_reverse_proxy.html