共计 3118 个字符，预计需要花费 8 分钟才能阅读完成。
本文主要解决：使用 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 反向代理，可以找技术人员帮忙处理
完毕。
下面关于 Nginx 的文章您也可能喜欢，不妨参考下：
CentOS 7 下 Nginx 服务器的安装配置 https://www.linuxidc.com/Linux/2017-04/142986.htm
CentOS 上安装 Nginx 服务器实现虚拟主机和域名重定向 https://www.linuxidc.com/Linux/2017-04/142642.htm
CentOS 6.8 安装 LNMP 环境（Linux+Nginx+MySQL+PHP）https://www.linuxidc.com/Linux/2017-04/142880.htm
Linux 下安装 PHP 环境并配置 Nginx 支持 php-fpm 模块 https://www.linuxidc.com/Linux/2017-05/144333.htm
Nginx 服务的 SSL 认证和 htpasswd 认证 https://www.linuxidc.com/Linux/2017-04/142478.htm
Ubuntu 16.04 上启用加密安全的 Nginx Web 服务器 https://www.linuxidc.com/Linux/2017-07/145522.htm
Linux 中安装配置 Nginx 及参数详解 https://www.linuxidc.com/Linux/2017-05/143853.htm
Nginx 日志过滤 使用 ngx_log_if 不记录特定日志 https://www.linuxidc.com/Linux/2014-07/104686.htm
CentOS 7.2 下 Nginx+PHP+MySQL+Memcache 缓存服务器安装配置 https://www.linuxidc.com/Linux/2017-03/142168.htm
Nginx 反向代理实现 Tomcat 负载均衡 https://www.linuxidc.com/Linux/2018-03/151223.htm
Nginx 搭建反向代理服务器 https://www.linuxidc.com/Linux/2018-03/151418.htm
Nginx 的详细介绍：请点这里
Nginx 的下载地址：请点这里
