运用Nginx反向代理处理前后端跨域访问

ASP站长网本文主要解决：使用Nginx反向代理处理前后端跨域访问的问题。
 
问题如下：
 
Failed to load http://192.168.1.137:8081/service/getStation?Line=1: No 'Access-Control-Allow-Origin'header is present on the requested resource. Origin 'http://192.168.1.136:8081' is therefore not allowed access.
 
问题分析：
 
禁止跨域问题其实是浏览器的一种安全行为
 
该问题是由于前端和后台服务器在不同服务器(IP)上，前端访问后台无法通过同一条链路传输数据导致的，这时如果直接ajax远程后台服务器，则会报错
 
解决方法：
 
配置nginx，将前端的访问请求和后端的响应都通过nginx反向代理进行处理
 
类似上面这个：
 
192.168.1.136:8081　　是前端，
192.168.1.137:8081　　是后台，tomcat
192.168.1.11          是nginx服务器
 
编辑nginx配置文件，配置以下内容
 
vim from_front_to_background.conf
 
# For Front end
server {
    listen 8136;
    server_name 192.168.1.11;
    charset utf-8;
    location / {
        proxy_pass http://192.168.1.136:8081;
    }
}
# For background
server {
    listen 8137;
    server_name 192.168.1.11;
    charset utf-8;
    location / {
        proxy_pass http://192.168.1.137:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    }
}
 
以下参数可加可不加，看是否能用到
 
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
配置完成，重新加载nginx配置文件，前端访问192.168.1.11:8136进行后续调试即可
 
service nginx reload
 
其他可以添加的参数：
根据报错内容里找到的，我自己弄的话没用到也可以解决该问题，
如果有问题可以将以下参数添加到location标签里
 
add_header 'Access-Control-Allow-Origin' 'http://www.linuxidc.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';
 
第一条：授权从www.linuxidc.com的请求，如果要相应来自任何域的请求可以将域名改成“*”,
 
也有说该方式适用于别人访问我们的情况
 
第二条：当该标志为真时，响应于该请求是否可以被暴露
第三天：指定请求的方法，可以是GET，POST等
 
ajax跨域请求测试
成功时，响应头是如下所示：
 
HTTP/1.1 200 OK
Server: nginx
Access-Control-Allow-Origin: www.linuxidc.com
 
拓展1：何为跨域访问？
以下类型为跨域访问：
1.不同域名间访问
 
www.linuxidc.com和www.baidu.com
 
2.同域名不同端口
 
www.linuxidc.com和www.linuxidc.com:8080
 
3.同于名不同协议，
 
http和https
 
4.域名和该域名自己的IP，
 
www.linuxidc.com和自己解析的IP：192.168.1.1
 
5.二级域名相同，三级级域名不同，
 
aaa.linuxidc.com和ttt.linuxidc.com
www.linuxidc.com和linuxidc.com等
 
以下类型为本域访问：
 
1.同一域名不同的子路径，
 
www.linuxidc.com/a.html和www.linuxidc.com/b.html
 
拓展2.跨域的常见解决方法（摘录）
 
https://www.cnblogs.com/gabrielchen/p/5066120.html
 
目前来讲没有不依靠服务器端来跨域请求资源的技术
 
1.jsonp 需要目标服务器配合一个callback函数。
2.window.name+iframe 需要目标服务器响应window.name。
3.window.location.hash+iframe 同样需要目标服务器作处理。
4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。
5.CORS 需要服务器设置header ：Access-Control-Allow-Origin。
6.nginx反向代理，可以找技术人员帮忙处理