前端跨域 nginx 反向代理

wubaiwan 2019-12-13 原文

1.下载ngnix稳定版 (http://nginx.org/en/download.html)

2.解压到你中意的目录。

3.将你的网页文件放到刚解压html文件目录下

4.打开conf > nginx.conf 配置文件，将server项目修改成：

server {         
        listen        8848;#监听端口    
        server_name  localhost;#代理服务地址
        location / {
            root  html; 
            index  index.html index.php 1.php 1.html;
        }
        #开始配置我们的反向代理
        location /api{        #"/api"中的api可以替换为自定义的任何内容     
            rewrite ^/api/(.*)$ /$1 break;     
            include uwsgi_params;     
            proxy_pass https://cn.bing.com; #我们要反向代理的地址,这里以 必应 为例  
            charset utf-8;   #显示中文      
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址           
            add_header 'Access-Control-Allow-Credentials' 'true';       
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式            
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';  
        }
    }

5.进入浏览器里面，访问 localhost:8848 或 127.0.0.1:8848(设置的监听端口，注意端口别冲突) 就能进到你项目的根目录；

6.在网页中就可以使用 /api 来代理到你想要访问的服务器地址了，

比如我想要请求的接口为：https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN;

直接ajax 请求存在跨域（同源政策），所以我们进行上面的配置反向代理，用 /api 来帮我们代理到 https://cn.bing.com，

就可以吧请求的接口写为：/api/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN 。

var url = "/api/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN";
 $.ajax({
   url:url,
   type:"post",
   dataType: "json",
   success: function(data){
    console.log(data);
   },
   error:function(){
    console.log("error")
   }
 });

注意：如果你使用的是hbuider 等内置服务器的IDE 就不能直接通过 “运行到浏览器来” 运行项目了，需要通过我们配置的 l ocalhost:8848 或 127.0.0.1:8848 来运行和调试我们的项目。

完美解决跨域问题。