前端如何通过Nginx代理做到跨域访问API接口

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源

Nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器

一.配置Nginx

废话不多说,我们直接打开nginx.conf文件

server {
        
        listen  8888;
        
        server_name 127.0.0.1;
 
        location / {
            if ($request_method ~* "(GET|POST)") {
              add_header "Access-Control-Allow-Origin"  *;
            }
 
            # Preflighted requests
            if ($request_method = OPTIONS ) {
              add_header "Access-Control-Allow-Origin"  *;
              add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
              add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
              return 200;
            }
            
            proxy_pass http://127.0.0.1:5500;
            proxy_redirect default;
        }
        
        location /api{
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass http://ip.taobao.com/;
        }
        
    }

配置解释：

我们在浏览器中输入 127.0.0.1:8888 自动会转发到 http://127.0.0.1:5500

http://127.0.0.1:5500 是本地所指向的地址，类似于vue开的的代理npm run dev 启动的一个地址,你也阔以不用code开启的代理，直接用nginx启动一个开发端口，把上面的 location / 替换掉

location / {
    #指向文件的目录
    root   D:\qianlima\weijia\weijia; 
    #指定项目页面名称
    index  index.html index.htm;
}

http://ip.taobao.com/ 是我们要访问的接口地址(淘宝检测ip地址来源的接口)

rewrite ^/apis/(.)$ /$1 break：代表重写拦截进来的请求，并且只能对域名后边以“/apis”开头的起作用，例如www.a.com/apis/msg?x=1重写。只对/apis重写。rewrite后面的参数是一个简单的正则 ^/apis/(.)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推,break代表匹配一个之后停止匹配。

前端ajax的url地址 这样写 http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51，访问的url中有api nginx会自动换到所对应的location

前端实列代码:

//新建一个html文件把以下代码放入script标签中
$.ajax({
    //请求淘宝检测ip地址来源的接口
    url:'http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51',
    type:'get',
    success:function(res){
      console.log(res)
    },
    error:function(err){
      console.log(err)
    }
})

启动服务:

我是通过vsCode的Go live插件启动了一个127.0.0.1:5500的服务，有很多同学是通过node开启的代理，都一样,
然后我们在浏览器中输入127.0.0.1:8888上面nginx所配置

打开浏览器network数据返回如下，说明跨域访问成功

附带完整实列代码
来自国外一篇文章Nginx启用CORS,配置的非常完整,需要翻墙

location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

二.其它跨域解决方案

1.jsonp 需要目标服务器配合一个callback函数。

2.window.name+iframe 需要目标服务器响应window.name。

3.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。

4.node.js开启本地代理,类似于vue-cli中的devServer模式,阔以方便开启代理

5.CORS 需要服务器设置header ：Access-Control-Allow-Origin。

6.Nginx反向代理，可以不用目标服务器配合，需要Nginx服务器，用于请求转发。

我个人认为4 、5 、6解决跨域问题在实际开发过程中显得更为重要

三.Nginx工具以及参考资料

Nginx在线配置生成工具(需要翻墙)
如何提高Nginx的性能
Nginx常用命令
Nginx 配置简述(小胡子哥)