windows环境下 nginx+iis 反向代理解决跨域问题

2023-08-22 19:47:52

项目基本完成，是时候花点时间整理一下最近的姿势了

1 什么是跨域？

网上对于跨域的概念会有大篇幅的文章去解释，似乎有点玄乎，初学者很容易对这个概念产生恐惧，跨域其实很简单，其实只要知道一点，无法跨域访问的本质原因其实是浏览器为了安全对前端脚本（一般脚本都是js）请求的一种限制，注意是浏览器的限制，而不是服务器的限制

即同一域下的js只能请求同一域下的接口，何为同一域？何为不同域？端口号相同且请求协议相同且主机名相同即为同一域，三个条件任意一条不满足都是跨域访问

下面实战一个简单的栗子：

如图，我们在本地IIS新建一个端口号为8081的web1，地址为http://localhost:8081，再新建一个端口号为8083的web2，地址为http://localhost:8083

然后在web1放一个代码如下的静态html，用ajax去请求web1下面的接口

web2里面为打包发布的.net webapi,代码如下

   public class HomeController : ApiController

    {

        // GET api/home/get

        [HttpGet]

        public IEnumerable<string> Get()

        {

            return new string[] { "value1", "value2" };

        }

    }

一切就绪后我们http://localhost:8081打开web1，浏览器调试发现会有如下报错

由于端口号不同，XMLHttpruqest对象无法请求http://localhost:8083的数据，这就是端口号不同导致的Ajax无法跨域请求。跨域其实就这么简单

2 那么如何解决跨域问题呢？

网上关跨域问题的解决方案有多种多样，我大概整理了一下大概有这么多跨域解决方案

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

上述方案前6种方案都有大大小小的问题：

比如方案1中的jsonp实现跨域的缺点：只能实现get一种请求，传输数据有限制。又比如方案6中的CORS跨域虽然支持Post请求，但是必须要所跨域的服务器需要实现Cors,而且还有少量浏览器不兼容，上述8,9两种方案可能是相对比较新的解决方案，我这边也没深入了解学习过，有兴趣的朋友可以自行百度学习一下，在这里主要分享一下关于Nginx的实战总结

3 Nginx反向代理解决跨域问题

什么是反向代理？什么是正向代理？我之前有文章写过这概念，这里就不过多的解释这个概念了，可以参考文章https://www.cnblogs.com/ruanraun/p/agent.html

3.1 ngnix安装配置

首先去官网下载 ngnix http://nginx.org/en/download.html

解压安装包后发现如下目录，不要急着点击nginx.exe

cmd打开命令提示符，cd命令定位到当前目录（还有一种快捷的定位到当前目录的方法：打开到要定位的目录，Shift+鼠标右键选择此处打开命令提示窗口，不过win10安装了PowerShell的好像就没有这个选项，那就老老实实用命令定位到当前目录了，不要用PowerShell）

定位到上图nginx的目录之后，用start nginx命令启动nginx.exe

然后输入tasklist /fi "imagename eq nginx.exe" 检查程序是否运行成功，如图即为运行成功

如果没有运行成功一般都是80端口被占用，去logs目录下查看日志

两种解决方案：

1，禁用占用80端口的程序，输入命令netstat -ano |more，查看到pid为4的程序占用了改端口，禁用掉这个程序，个人觉得这个方法不太靠谱，因为你可能不知道被禁用程序的作用，有时可能是系统程序，也有可能是部署的其他程序，所以直接禁用可能会引起其他问题，除非非要部署到80端口且知道80端口被占用程序的作用的情况下使用这个解决方案

2，改nginx配置,使用其他端口，打开conf文件下的nginx.conf文件，把里面的80端口改成其他端口，我这里用的是8082端口

修改完配置完成后保存，然后到之前的命令提示符窗口输入：nginx -s reload 重启nginx，记住每次修改完配置后都要重启nginx

然后访问http://localhost:8082，出现下面界面说明就配置OK啦

3，继续配置nginx.conf文件实现跨域

配置说明：

1.由配置信息可知，我们让nginx监听localhost的8082端口，web1与web2的访问都是经过localhost的8082端口进行访问。

2.我们特殊配置了一个“/apis”目录的访问，并且对url执行了重写，最后使以“/apis”开头的地址都转到“http://localhost:8081”进行处理。

3.rewrite ^/apis/(.*)$ /$1 break;

代表重写拦截进来的请求，并且只能对域名后边以“/apis”开头的起作用，例如www.a.com/apis/msg?x=1重写。只对/apis重写。

　　rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。

　　break代表匹配一个之后停止匹配。

全部配置文件如下

#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/octet-stream;

    #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 {

        listen       8082;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            proxy_pass http://localhost:8081;

            proxy_redirect default;

        }

        location /apis { #添加访问目录为/apis的代理配置

            rewrite  ^/apis/(.*)$ /$1 break;

            proxy_pass   http://localhost:8083;

        }

        #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

        #

        #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:8082;

    #    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;

    #    }

    #}

}

还有一最后一步就是修改web1下面的静态文件代码，将请求url改成/apis/api/Home/Get

最后重启nginx,访问http://localhost:8082，有时可能会有缓存问题显示之前的欢迎界面用Ctrl+F5刷新一下就好了，如下图：

我们看到http://localhost:8082显示了web1的界面，并且正常输web2接口返回的数据，是不是换了个思维解决了跨域的问题，我们最终访问的地址时间是nginx代理的http://localhost:8082，这也就是所说的反向代理，访问http://localhost:8082的客户端并不知道用户界面实际是放在http://localhost:8081端口的web1下，接口程序放在http://localhost:8083端口的web2下。

4 总结

反向代理不仅仅可以解决跨域问题，还有很多好处，大型项目中前端文件和接口程序完全可以发布到不同的服务器中，使用反向代理技术，前后端各自维护自己的服务器，接口程序还可以供不同平台使用.......

nginx十分强大，大佬们都在使用：*使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

码农公寓

相关文章