nginx反向代理

前端调用接口的时候跨域了怎么办呢,如下代码跨域:

        $.ajax({
            type:'POST',
            data:{accountPwd: "loveyou",accountUser: "loveme"},
            url:'http://192.168.1.99:3309/mice/login',
            success:function(res){
                console.log(res)
            }
        })

image.png

通过nginx反向代理
下载nginx:http://nginx.org/en/download.html
解压到后的目录如下:

image.png

配置:conf/nxinx.conf
nginx.conf默认的配置最好不要改,我们在nxinx.conf同目录下新建一个配置文件myconfig.conf并添加如下代码:

server {
        listen       5328;    #监听端口  可以访问127.0.0.1:8090
        server_name  localhost;  #这里要是使用需要配本地的host

        #charset koi8-r;
        access_log  logs/k8s.log;

        location / {
          root   E:/MyProject/demo/iframe/a;  #你项目的根目录
          index  index.html index.htm;
        }

        location /mice {                  
            proxy_pass   http://192.168.1.99:3309;  #这里填上服务器地址
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

在nginx.conf中引用(在http{}里面server {}外面),如下:

http {
    ...
    include myconf.conf;
    server {
        ...
    }
    ...
}   

将js代码url替换成下面的 url:'/mice/login',

        $.ajax({
            type:'POST',
            data:{accountPwd: "loveyou",accountUser: "loveme"},
            url:'/mice/login',
            success:function(res){
                console.log(res)
            }
        })

cd到nginx.exe目录下命令行s输入tart nginx.exe运行;
运行后,访问localhost:5328,这时候就可以看到E:/MyProject/demo/iframe/a下的页面;
此时就可以看到请求的数据啦;

image.png