2021-06-09

Nginx跨域问题解决方案

关键配配如下

192.168.30.4 nginx主要配置

 server {
        listen    810;
        server_name default;
        location /{
          add_header 'Access-Control-Allow-Origin' 'http://192.168.30.4:6001';
          add_header 'Access-Control-Allow-Credentials' 'true';  
          add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';  
          add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
          if ($request_method = 'OPTIONS') {
                return 204;
          }
          proxy_pass  http://192.168.20.180:810;
        }
    }

   server {
        listen    800;
        server_name default;
        location /{
          add_header 'Access-Control-Allow-Origin' 'http://192.168.30.4:6001';
          add_header 'Access-Control-Allow-Credentials' 'true';  
          add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';  
          add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
          if ($request_method = 'OPTIONS') {
                return 204;
          }
          proxy_pass  http://192.168.20.180:800;
        }
    }
    server {
        listen      6001;
        server_name   localhost;
        location / {
           root  /var/www/html;
           index  index.html index.htm;
        }
    }

CORS: 跨域资源共享(Cross-Origin Resource Sharing)http://www.w3.org/TR/cors/

当前几乎所有的浏览器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome 3+）都可通过名为跨域资源共享（Cross-Origin Resource Sharing）的协议支持ajax跨域调用。(see: http://caniuse.com/#search=cors)

Chrome, Firefox, Opera and Safari 都使用的是 XMLHttpRequest2 对象， IE使用XDomainRequest。XMLHttpRequest2的Request属性：open()、setRequestHeader()、timeout、withCredentials、upload、send()、send()、abort()。

XMLHttpRequest2的Response属性：status、statusText、getResponseHeader()、getAllResponseHeaders()、entity、overrideMimeType()、responseType、response、responseText、responseXML。

 

1、启用 CORS 请求

假设您的应用已经在 example.com 上了，而您想要从 www.example2.com 提取数据。一般情况下，如果您尝试进行这种类型的 AJAX 调用，请求将会失败，而浏览器将会出现“源不匹配”的错误。利用 CORS，www.example2.com 服务端只需添加一个HTTP Response头，就可以允许来自 example.com 的请求：

Access-Control-Allow-Origin: http://example.com

Access-Control-Allow-Credentials: true（可选）

可将 Access-Control-Allow-Origin 添加到某网站下或整个域中的单个资源。要允许任何域向您提交请求，请设置如下：

Access-Control-Allow-Origin: *

Access-Control-Allow-Credentials: true（可选）

其实，该网站 (html5rocks.com) 已在其所有网页上均启用了 CORS。启用开发人员工具后，您就会在我们的响应中看到 Access-Control-Allow-Origin 了。

 

2、CORS方法实现跨域请求

要实现CORS跨域，服务端需要这个一个流程:http://www.html5rocks.com/static/images/cors_server_flowchart.png

对于简单请求，如GET，只需要在HTTP Response后添加Access-Control-Allow-Origin。

对于非简单请求，比如POST、PUT、DELETE等，浏览器会分两次应答。第一次preflight（method: OPTIONS），主要验证来源是否合法，并返回允许的Header等。第二次才是真正的HTTP应答。所以服务器必须处理OPTIONS应答。

http://enable-cors.org/server_nginx.html 这里是一个nginx启用COSR的参考配置。

 

流程如下：

首先查看http头部有无origin字段；

如果没有，或者不允许，直接当成普通请求处理，结束；

如果有并且是允许的，那么再看是否是preflight(method=OPTIONS)；

如果是preflight，就返回Allow-Headers、Allow-Methods等，内容为空；

如果不是preflight，就返回Allow-Origin、Allow-Credentials等，并返回正常内容。

首先，在远端需要访问的主机上做设置，假如远端主机是nginx服务，那么添加如下信息即可。

 

server {
listen 80;
server_name tangxiaoyue.com;
if ( $http_user_agent = "Mozilla/5.0"){
return 403;
}
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
后面省略。。。
}
}

 

nginx反向代理解决跨域

    禁止跨域问题其实是浏览器的一种安全行为，而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成，但都少不了目标服务器做相应的改变，如果目标服务器无法改变的时候，就需要本地服务器实现，本地实现的话，需要搭建一个nginx并把相应代码部署在它的下面，由页面请求本域名的一个地址，转由nginx代理到目标服务器处理后返回结果给页面，而且这一切都是同步的。

假如代理服务器地址是 www.c.com/proxy/html/api/msg?method=1=2;   www.c.com是nginx主机地址

远端服务器地址：http://www.b.com/api/msg?method=1=2

在nginx服务器上做如下配置

在location下面再添加一个location。

location ^~/proxy/html/{

rewrite ^/proxy/html/(.*)$ /$1 break;

proxy_pass http://www.b.com/;

}

 

以下做一个解释：

1.'^~ /proxy/html/ ‘

　　就像上面说的一样是一个匹配规则，用于拦截请求，匹配任何以 /proxy/html/开头的地址，匹配符合以后，停止往下搜索正则。

2.rewrite ^/proxy/html/(.*)$ /$1 break;

　　代表重写拦截进来的请求，并且只能对域名后边的除去传递的参数外的字符串起作用，例如www.c.com/proxy/html/api/msg?method=1=2重写。只对/proxy/html/api/msg重写。

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

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

 

今天参照192.168.30.4服务器上的方法不能产现跨域

于是参照了上面的反访问代理终于实现跨域

主要配配如下

server{
        listen 8001;
        server_name  localhost;
        location /{
        root /finance/dist;
        index index.html;
        }
}
server {
        listen 8080;
        server_name localhost;
        location / {
        proxy_pass  http://192.168.30.120:9090;
        }
        location ^~ /dev-api/ {
        rewrite ^/dev-api/(.*)$ /$1 break;
        proxy_pass  http://192.168.30.120:9090;
        }

}

生命不息，技术不止，谢谢