手机版
你好,游客 登录 注册
背景:
阅读新闻

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

[日期:2018-03-21] 来源:Linux社区  作者:tssc [字体: ]

本文主要解决:使用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 的下载地址请点这里

本文永久更新链接地址https://www.linuxidc.com/Linux/2018-03/151469.htm

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款